将所有轴标签添加到 d3.js 图形中

Adding all axis labels to a d3.js graph

本文关键字:d3 js 图形 添加 标签      更新时间:2023-09-26

我正在使用这个模板(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/

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

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

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

退房

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

用于旋转轴标签。