4

エクスポートしようとしている 2 種類のグラフがあります。私は SVG Crowbar を使用していますが、Chrome では問題なく動作しますが、Firefox では CSS をエクスポートしません (IE を気にするつもりはありません)。すべての CSS をインライン スタイルに変換することにしました。ただし、2 つの問題が発生しています (各グラフに 1 つ)。

棒グラフでは、「ストローク:黒;」を適用できないようです。軸ラベルではなく、軸のみに。「ストローク:黒」は、ラベルをぼやけて魅力的ではありません。ここに問題の JSFiddle があります: http://jsfiddle.net/UK8bw/10/。軸/ラベルのコードは次のとおりです。私はそれらを分割しようとしましたが、成功しませんでした。関連する CSS を CSS セクションでコメントアウトしたままにしました。

svg.append("g")
    .attr("class", "xAxis")
    .attr("fill", "none")
    .attr("stroke", "black")
    .style("shape-rendering", "crispEdges")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis)
    .selectAll("text")
    .style("text-anchor", "end")
    .attr("dx", "-.6em")
    .attr("dy", "-0.195em")
    .attr("transform", function (d) {
        return "rotate(-90)"
    });  

svg.append("g")
    .attr("class", "yAxis")
    .attr("fill", "none")
    .attr("stroke", "black")
    .attr("shape-rendering", "crispEdges")
    .call(yAxis)
    .append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 6)
    .attr("dy", ".71em")
    .style("text-anchor", "end")
    .text("Y-Axis Label");

円グラフもあります。すべての CSS スタイルをインライン スタイルに変換できましたが、新たな問題が発生しました。凡例とグラフ自体は、2 つの異なる SVG に表示されます。このため、両方を 1 つのファイルにダウンロードすることはできません。グラフと凡例の両方を同じ SVG に表示する方法はありますか? ここに JSFiddle があります: http://jsfiddle.net/NYEaX/7/

4

1 に答える 1