如何动态跳过d3.js图表​​中的x轴标签，使其始终具有漂亮的图表？

Question

如何动态跳过d3.js图表​​中的x轴标签，以便始终保持漂亮的图表？ 如果我的图表在x轴上有很多数据点，那么每个数据点都是x轴上的标签，这些标签重叠。 以下是overlapping x axis labels

的示例

我不想旋转x轴标签我想跳过标签的显示，如果x轴上可能有超过20个，那么总是有一个漂亮的图表。

Answer 1

参考你放在屏幕截图上的例子：

//you draw the graph when ticks are less than 10 add this condition
 if (x.ticks().length < 10){
  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);
}

工作代码here

Answer 2

将tickValues设置为xAxis。

xAxis.tickValues（d3.range（minX，maxX，interval））;

interval是跳过的次数。就像你想在你的xAxis上显示每个第五个标签一样，那么间隔就是5。