D3.js：yAxis文本粗體和模糊

Question

我正在嘗試使用D3.js繪製自定義的yAxis。我的理想結果應該是這樣的：JSFiddle。

但我還沒有找到將SVG圖像與CSS樣式一起導出的方式。所以，我想樣式移動到SVG元素：

var yNode = svg.append("g") 
       .style("fill", "none") 
       .style("stroke", "#000") 
       .attr("transform", "translate(" + left + ",0)") 
       .attr("class", "axis") 
       .call(yAxis); 
yNode.selectAll('text') 
       .style('font-size', '11px') 
       .style('font-family', 'Lucida Console'); 

的代碼是在這裏：JSFiddle。

所有樣式都是一樣的。但不知何故，後者的yAxis標籤變得模糊和大膽。如何解決它？謝謝。

Answer 1

這：JsFiddle

您選擇了整個軸DOM元素和施加填充：無和中風：黑色到它。該軸包含：路徑和文本，都將受到筆劃的影響。這就是爲什麼你的文字被撫摸。

所以我註釋掉填充&行程這裏

var yNode = svg.append("g") 
     //.style("fill", "none") 
     //.style("stroke", "#000")    
     .attr("transform", "translate(" + left + ",0)") 
     //.attr("class", "axis") 
     .call(yAxis); 

選擇的路徑，並添加填充和筆觸樣式

yNode.select('path') 
     .style("fill", "none") 
     .style("stroke", "#000");