javascript - 将所有轴标签添加到 d3.js 图表中

Question

我正在使用此模板 ( https://bl.ocks.org/mbostock/3883245 ) 来使用 d3 构建图表。我想添加所有 x 轴标签。至于例子；作者没有添加所有内容。

当我阅读教程时；建议更改此一项

  x.domain(d3.extent(data, function(d) { return d.date; }));
  y.domain(d3.extent(data, function(d) { return d.close; }));

我该怎么办？

JSFiddle:http://jsfiddle.net/gqLgowh1/1/

Answer 1

您可以首先从轴函数中删除 .ticks(5) 调用。

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

这将显示比例中的所有标签。但您会注意到文本会重叠。因此，您需要选择轴中的所有标签并旋转它们并重新调整边距以获得更好的外观。

查看

http://bl.ocks.org/mbostock/4403522

用于旋转轴标签。