Menu
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?
962
Ticks come in two types: major and minor. Major ticks separate the axis into major units. On category axes, major ticks are the only ticks available (you cannot show minor ticks on a category axis). On value axes, one major tick appears for every major axis division.
d3. ticks generates an array of nicely-rounded numbers inside an interval [start, stop]. The third argument indicates the approximate count of values needed. For example, to cover the extent [0, 10] with about 100 values, d3.ticks will return these ticks: start = 0.
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.
134
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
