Подтвердить что ты не робот

Как я могу получить тики и позиции оси D3.js как массив?

Я обычно размещаю свои оси на svg, используя это:

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

Можно ли получить эти значения тика и их координаты svg, чтобы я мог использовать пользовательскую ось вне svg, используя d3.svg.axis()?

Ответ 1

Да, xScale.ticks(4) должен указывать фактические отметки в виде значений, и вы можете передать их обратно через xScale в положение X. Вы также можете просто вытащить метки из сгенерированных элементов после применения оси к фактическому элементу:

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

Ответ 2

В d3 v4 я просто разбирал визуализированные значения x из узлов тиков

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