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

The latest version doesn't offer anything to draw minor ticks as explicitly as previous versions, but there's no need to draw another axis to achieve what you want. You can use the scale to generate additional ticks and then use the familiar .data() pattern to draw lines for those for which no lines exist already.

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 is the container into which the axis has been drawn before. The scale is used to generate the required number of ticks and matching is done by the data itself. This means that no additional ticks will be drawn for the ones that already exist when using the .enter() selection.

Complete jsfiddle here.