examples - d3.js tutorial

¿Cómo puedo obtener las marcas y posiciones del eje D3.js como una matriz?

Question

Suelo colocar mis tics de eje en el svg usando esto:

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

¿Es posible obtener estos valores de tic y sus coordenadas svg para que pueda usar un eje personalizado fuera de svg usando d3.svg.axis() ?

Answer 1

Sí, xScale.ticks(4) debería darle los puntos reales como valores, y puede canalizarlos a través de su xScale hasta la posición X. También puede simplemente tirar los puntos de retroceso desde los elementos generados después de aplicar el eje a un elemento real:

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