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

Question

我有点卡在某些东西上,我希望也许有人可以指出我正确的解决方向.由于搜索的措辞,在Google上运行搜索并没有帮助我.

我想要做的是在图表上获得x位置的"值".在我的图表上,我的x轴由日期组成.所以,如果我知道图上绘制的x坐标点是200,例如,我想要x-position 200的日期标签.有很多教程和示例演示了如何检索x坐标( 200),但不是x坐标值(x位置200的日期对象).

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

无论如何,我有点想要一种逆向工程的方法......

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

...但是,在这种情况下,不是将x坐标位置返回,而是根据提供的x坐标位置返回Date.

任何指向您可以提供给我的解决方案的指针都将非常感激.谢谢你的时间.

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 (?? (???))