d3.js - D3 的 V3 的主要和次要滴答声？

Question

我想绘制一个带有不同样式的主要和次要刻度的轴。

本例 http://bl.ocks.org/vjpgo/4689130大致完成我想要的，但我无法让它与 D3 的 V3 一起使用。

是 .subDivide()不推荐使用的方法？我在当前文档中看不到它:https://github.com/mbostock/d3/wiki/SVG-Axes

如果是这样，在 D3 的 V3 中绘制主要和次要刻度的最佳方法是什么？我应该画两个完全不同的轴吗？

Answer 1

最新版本没有像以前的版本那样明确地提供任何绘制小刻度的功能，但是不需要绘制另一个轴来实现您想要的。您可以使用刻度来生成额外的刻度，然后使用熟悉的 .data()为那些已经不存在线条的图案绘制线条。

xaxisg.selectAll("line").data(x.ticks(64), function(d) { return d; })
  .enter()
  .append("line")
  .attr("class", "minor")
  .attr("y1", 0)
  .attr("y2", -60)
  .attr("x1", x)
  .attr("x2", x);

xaxisg是之前绘制轴的容器。刻度用于生成所需的刻度数，匹配由数据本身完成。这意味着在使用 .enter() 时不会为已经存在的刻度绘制额外的刻度。选择。

完整的 jsfiddle here .