How can I get the D3.js axis ticks and positions as an array?

Question

I usually place my axis ticks on the svg using this:

d3.svg.axis().scale(xScale(width)).ticks(4) 

Is it possible to get these tick values and their svg coordinates so I can use a custom axis outside the svg using d3.svg.axis() ?

Answer 1

Yes, xScale.ticks(4) should give you the actual tick points as values, and you can pipe those back through your xScale to the the X position. You can also just pull the tick points back from the generated elements after you apply the axis to an actual element:

var svg = d3.select("svg");  var scale = d3.scale.linear()     .range([20, 280])     .domain([0, 100])  var axis = d3.svg.axis().scale(scale).orient("bottom").ticks(9); // grab the "scale" used by the axis, call .ticks() // passing the value we have for .ticks() console.log("all the points", axis.scale().ticks(axis.ticks()[0])); // note, we actually select 11 points not 9, "closest guess"  // paint the axis and then find its ticks svg.call(axis).selectAll(".tick").each(function(data) {   var tick = d3.select(this);   // pull the transform data out of the tick   var transform = d3.transform(tick.attr("transform")).translate;    // passed in "data" is the value of the tick, transform[0] holds the X value   console.log("each tick", data, transform); }); 

jsbin