javascript - 如何在不在 SVG 中渲染的情况下从 d3 中获取轴刻度？

Question

我正在使用 Canvas 实现二维图表。我想重用 d3 的逻辑来生成图表的轴。 d3 在生成轴方面做了很多出色的工作，我想利用它。

(注意:出于向后兼容的原因，我暂时坚持使用 d3v3。)

考虑以下 d3 代码:

let scale = d3.time.scale()
    .range([0, width])
    .domain([lo, hi]);
let axis = d3.svg.axis()
    .scale(scale)
    .ticks(num_ticks)
    .tickSize(10)
    .orient("bottom");

我可以将其渲染到图表 div 中:

svg.selectAll('.x-axis').call(axis);

我希望能够以编程方式从 axis 中获取刻度数据，包括格式化的标签，方法是编写一个行为如下的函数:

ticks = get_axis_ticks(axis)

ticks 应该包含每个刻度位置(在这种特殊情况下作为 Date)和相应的 d3 生成的标签。

[[Date(...), "Wed 19"],
 [Date(...), "Fri 21"],
 [Date(...), "Apr 23"],
 [Date(...), "Tue 25"],
 ...]

然后我可以使用这些数据在我的 Canvas 上绘制一个轴。

我已经深入研究了 d3v3 源代码(特别是此处:https://github.com/d3/d3/blob/v3.5.17/src/svg/axis.js)，但我发现很难将逻辑与 SVG 操作分开。

非常感谢您的帮助。

Answer 1

我的一个想法是使用您创建的缩放函数来生成您想要的刻度并将它们推送到一个数组中。

作为一个非常简单的示例，如果您想要 10 个刻度，每个刻度以 1 为单位递增，您可以这样做:https://jsfiddle.net/Q5Jag/3148/

//define dummy values
var lo = 1;
var hi = 10;
var width = 512
var scale = d3.time.scale()
    .range([0, width])
    .domain([lo, hi]);

//define your function
var get_x_axis = function() {
    let axisArr = [];
    for(var i = 0; i < 10; i++ ) {
    //calculate your value
    axisArr.push(scale(i))
  }
  return axisArr
}

//call it
let axisTicks = get_x_axis()

//log it
console.log(axisTicks)

我不确定这是否是您要找的，但如果您需要进一步的帮助，请直接询问。