D3.js离X＆amp;面积图的Y坐标

Question

嗨我有一张面积图，里面有几张X（年）＆amp; Y（价格）值。正如我发现有一种简单的方法来获取X，当用户点击其中一个点然而点击外线时，Y可以协调图表的值，即SVG / Chart-Body区域只能提供X，Y这些是坐标飞机而不是数据。

指向图表：

circles = c.svg().selectAll 'circle.dot'
circles.on 'click', (d) ->
    console.log 'POINT', 'Datum:', d

O / P：

POINT Datum: 
{x: Fri Feb 01 1980 00:00:00 GMT+0000 (GMT Standard Time), y: 666}

指出图表外：

svg.on 'click', () ->
    console.log 'SVG', d3.mouse(@)

O / P：

SVG [605.5, 394.5]

现在有什么方法可以在点击SVG时获得最近的数据坐标？例如 SVG [605.5,394.5]将是（类似最近[X，Y] 使用）

{x: Fri Feb 01 1980 00:00:00 GMT+0000 (GMT Standard Time), y: 666}

或将SVG X，Y转换为数据X，Y？

的其他方法

原始数据的格式为

[
    {x: Fri Jan 01 1980 00:00:00 GMT+0000 (GMT Standard Time), y: 666},
    {x: Fri Feb 01 1980 00:00:00 GMT+0000 (GMT Standard Time), y: 668},
    {x: Fri Mar 01 1980 00:00:00 GMT+0000 (GMT Standard Time), y: 700},
    {x: Fri Apr 01 1980 00:00:00 GMT+0000 (GMT Standard Time), y: 750},
    .
    .
    .
    {x: Fri Dec 01 2010 00:00:00 GMT+0000 (GMT Standard Time), y: 2000},
    .
    .
    .
]

Answer 1

http://bl.ocks.org/mikehadlow/93b471e569e31af07cd3

使用d3.bisector，

var mouse = d3.mouse(this);
var mouseDate = xScale.invert(mouse[0]);
var bisectDate = d3.bisector(function(d) { return d.x; }).left;
var i = bisectDate(data, mouseDate); // returns the index to the current data item

var d0 = data[i - 1]
var d1 = data[i];
// work out which date value is closest to the mouse
var d = mouseDate - d0[0] > d1[0] - mouseDate ? d1 : d0;

var x = xScale(d[0]);
var y = yScale(d[1]);