エクスポートしようとしている 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/