將D3.js CSS樣式轉換爲嵌入樣式

我有兩種類型的圖表，我嘗試導出。我使用的是SVG Crowbar，它在Chrome中運行的很好，但是在Firefox中它不會導出CSS（而且我不打算用IE來打擾）。我決定將所有的CSS轉換爲內聯樣式。但是，我遇到了2個問題（每個圖都有1個問題）。將D3.js CSS樣式轉換爲嵌入樣式

在條形圖中，我似乎無法應用「stroke：black;」只有軸，而不是軸標籤。「中風：黑色」讓標籤變得模糊，並且沒有吸引力。這裏是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樣式轉換爲內聯樣式，但是我遇到了一個新問題。圖例和圖形本身顯示在兩個不同的SVG上。正因爲如此，我無法將它們都下載到一個文件中。有什麼方法可以在同一個SVG上顯示圖表和圖例嗎？這裏是一個的jsfiddle：http://jsfiddle.net/NYEaX/7/

來源

2013-06-28 TFischer

最簡單的做法是設置你想要改變的樣式，例如'.selectAll（「text」）.style（「stroke」，「none」）等等。 –

我設法弄清楚第二個問題與餅圖。這裏有一個JSFiddle在任何人的修補程序感興趣：http://jsfiddle.net/NYEaX/8/。儘管如此，我仍然在尋找第一個問題的答案。如果有人有修復，請發佈！ – TFischer

@Kotthoff - 我試着在最後添加'svg.selectAll（「text」）。style（「stroke」，「none」）''這行，但那不起作用。我會在哪裏放置該代碼？ – TFischer

做的最簡單的事情可能是設置要明確的風格，即

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("fill", "black") 
    .style("stroke", "none") 
    .style("text-anchor", "end") 
    .attr("dx", "-.6em") 
    .attr("dy", "-0.195em") 
    .attr("transform", function (d) { 
    return "rotate(-90)" 
    });

更新的jsfiddle here。

來源

2013-06-28 18:42:36

將D3.js CSS樣式轉換爲嵌入樣式

回答

相關問題