Question

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

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

我试图通过堆栈交换中的许多帖子搜索为什么会发生这种情况，但无法获得任何线索。任何人都有任何想法或建议，可以帮助我处理x轴标签的自动加粗。

Answer 1

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

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;
  }
}

这解决了我的问题。

还有一点需要注意，就像我这样可能遇到过这篇文章的初学者不会使用笔画在svg中为你的文字上色，它会使它看起来很粗体，而是使用fill来改变文字的颜色。这是另一个错误，我试图解决这个问题时一直在喋喋不休。

Answer 2

我认为是因为调用轴会添加黑色域路径，您可以将其隐藏或用于不同目的。我经常这样做：

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;
}

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

2 个答案: