Question

我通常使用以下方法将我的轴刻在svg上：

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

是否可以获取这些刻度值及其svg坐标，以便我可以使用d3.svg.axis()在svg外部使用自定义轴？

Answer 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

Answer 2

在d3 v4中，我最终只是从刻度节点中解析了渲染的x值

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

如何将D3.js轴刻度和位置作为数组？

2 个答案: