d3.js - Major and minor ticks with V3 of D3?

Question

I want to draw an axis with major and minor ticks styled differently.

This example http://bl.ocks.org/vjpgo/4689130 does roughly what I want, but I can't get it to work with V3 of D3.

Is .subDivide() a deprecated method? I can't see it in the current documentation: https://github.com/mbostock/d3/wiki/SVG-Axes

If so, what is the best approach to drawing major and minor ticks in V3 of D3? Should I draw two completely different axes?

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 。