d3.js：折线图的 x 轴标签显示为粗体

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

我想是因为call axis会加一个黑域路径，你可以隐藏它或者用于不同的目的。我经常这样做：

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

然后隐藏它（CSS 在这种情况下）

.xAxis .domain {
  display: none;
}

或者可能（不确定）

.xAxis path {
  display: none;
}

Answer 2

经过多次尝试，我发现我需要的只是从代码中删除 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 的代码中放置 class，我为 xAxis 放置了以下 sass 代码：

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

这解决了我的问题。

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

d3.js：折线图的 x 轴标签显示为粗体

d3.js: The xaxis labels are showing bold for a line chart

javascript

css

svg

d3.js