Wie kann ich die Achsen und Positionen der Achse D3.js als Array erhalten?

Question

ich in der Regel meine Achse platzieren Zecken auf dem svg dies mit:

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

Ist es möglich, diese Zecke Werte und ihre svg-Koordinaten zu erhalten, damit ich eine benutzerdefinierte Achse außerhalb des svg d3.svg.axis() verwenden können?

Answer 1

Ja, xScale.ticks(4) sollten Sie die tatsächlichen Tick-Punkte als Werte geben, und Sie können diese zurück durch Ihre xScale an die X-Position. Sie können auch nur ziehen die Zecke Punkte wieder aus den generierten Elemente, nachdem Sie die Achse auf ein tatsächliches Element anwenden:

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