d3.js - 尝试从 d3.js SVG 图上的 x 坐标检索 x 值

Question

我有点卡在某事上，我希望有人能为我指明解决方案的正确方向。由于搜索的措辞，在 Google 上运行搜索对我帮助不大。

我想要做的是获取图形上 x 位置的“值”。在我的图表上，我的 x 轴由日期组成。因此，如果我知道图表上绘制的 x 坐标点是 200，例如，我想要 x 位置 200 的日期标签。有很多教程和示例演示如何检索 x 坐标( 200)，但不是 x 坐标值(x 位置 200 的日期对象)。

我最终要做的是构建一个用户注释功能，允许用户在图表上选择一个 x 位置，然后在该点做一个注释。我需要为该注释存储一个对象，其中包含其坐标的 x 和 y 值，并且由于通过将 Date 对象应用于 .x 来映射和重新映射图形上的点，因此我需要获取任何点的日期我在图表上绘制，以便可以记录和重新应用它们，甚至可以在用户决定移动笔记工具时移动它们。

无论如何，我正在寻找一种方法来对此进行逆向工程...

function getDateX(x, data) {
    var dateX = x(data.Date);
    return dateX;
}

...但在这种情况下，不是取回 x 坐标位置，而是根据提供的 x 坐标位置取回日期。

如果您能为我提供解决方案的任何指示，我们将不胜感激。感谢您的宝贵时间。

Answer 1

var x = d3.scale.linear()
          .domain([0,200])
          .range([new Date("2000-01-01"), new Date("2001-01-01")]);

new Date(x(150))

// Sun Oct 01 2000 21:00:00 GMT+0900 (東京 (標準時))

或者，如果您已经有一个日期 -> 数字的刻度

var x = d3.time.scale()
          .range([0,200])
          .domain([new Date("2000-01-01"), new Date("2001-01-01")]);

x.invert(150)

// Sun Oct 01 2000 21:00:00 GMT+0900 (東京 (標準時))