Question

我正在尝试使用D3.js绘制自定义yAxis。我理想的结果应该是这样的：JSFiddle。

但我还没有找到将CSS样式与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元素，并将fill：none和stroke：black应用于它。轴包含：路径和文本，两者都将受到笔划的影响。这就是你的文字被抚摸的原因。

所以我评论了填充和放大中风

    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");

D3.js：y轴文字粗体和模糊

1 个答案: