Comment puis-je obtenir les D3.js axe tiques et se positionne comme un tableau?

J'ai l'habitude de placer mon axe de tiques sur le svg en utilisant ceci: 

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

Est-il possible d'obtenir ces tiques valeurs et leurs svg coordonnées afin que je puisse utiliser un axe à l'extérieur de la svg à l'aide de d3.svg.axis() ?

  • Vous devez les attraper si vous appelez xScale.ticks().
InformationsquelleAutor el_pup_le | 2014-03-28
  1. 27

    Oui, xScale.ticks(4) devrait vous donner la réelle tique de points, et vous pouvez transférer ces grâce à votre xScale à la position X. Vous pouvez aussi tirer sur la tique points de retour de la éléments générés après l'application de l'axe de l'élément actuel:

    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

    • Qu'est-ce que la v4 équivalent?
    • Je ne suis pas encore sûr de moi-même, je n'ai pas eu à résoudre ce problème, mais si quelqu'un a une v4 equiv, n'hésitez pas à modifier/modifier la réponse.
    • Addenda insérés pour arriver tickValues avec v4.
    • Un D3 v4 réponse est ici (tldc; c'est axis.scale().ticks(), ou tout simplement someScaleObject.ticks() if the scale obj is accessible)
    • de l'axe.scale().les tiques() en d3 v4 pouvez retourner le mauvais nombre de tiques. J'avais mis 5 tiques, mais il était de retour 11.
    InformationsquelleAutor gnarf
  2. 0

    En d3 v4 j'ai fini juste à l'analyse du rendu des valeurs de x à partir de la tique nœuds

    function parseX(transformText) {
    let m = transformText.match(/translate\(([0-9\.]*)/);
    let x = m[1];
    if (x) {
        return parseFloat(x);
    }
}
    InformationsquelleAutor Mike Blandford