javascript - d3.js:折线图的 xaxis 标签显示为粗体

Question

我正在尝试使用 d3.js 创建折线图，默认情况下没有任何文本 CSS，以下代码显示 x 轴的粗体标签。

var svg = d3.select(element).append("svg")
      .attr("width", "800")
      .attr("height", "150")
      .append("g")
      .attr("transform", "translate(20, 20)");

var xAxis = d3.svg.axis()
      .scale(x)
      .orient("bottom");

svg.append("g")
  .style('fill', 'none')
  .style('stroke', '#000')
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis);

我试图在 stack exchange 中搜索许多帖子来了解为什么会发生这种情况，但找不到任何线索。任何人有任何想法或建议可以帮助我处理 x 轴标签的自动加粗。

Answer 1

经过多次尝试，我发现我需要的只是从代码中删除 stroke 属性，而应该编码如下:

var svg = d3.select(element).append("svg")
  .attr("width", "800")
  .attr("height", "150")
  .append("g")
  .attr("transform", "translate(20, 20)");

var xAxis = d3.svg.axis()
  .scale(x)
  .orient("bottom");

svg.append("g")
  .style('fill', 'none')
  //should remove the stroke from this place.
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis);

因为在 X 轴上放置笔划也会附加到我的标签文本上。通过使用@UberKaeL 的想法在我的代码中放置一个名为 xAxis 的类，我为 xAxis 放置了以下 sass 代码:

xAxis{
  fill: none;
  line, path {
    stroke: #000;
  }
}

这解决了我的问题。

还有一点要注意，像我这样的初学者可能会看到这篇文章，不要使用 stroke 为 svg 中的文本着色，它会自动使它看起来粗体，而不是使用 fill 更改文本的颜色。这是另一个错误，我在尝试解决问题时撞到了头。