D3.js 获取面积图最近的 X 和 Y 坐标答案

【问题标题】：D3.js get nearest X & Y coordinates for Area ChartD3.js 获取面积图最近的 X 和 Y 坐标
【发布时间】：2016-03-06 23:11:10
【问题描述】：

您好，我有一张带有多个 X（年）和 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 转换为 Data 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},
    .
    .
    .
]

【问题讨论】：

bl.ocks.org/mikehadlow/93b471e569e31af07cd3
我已经有了十字准线；本质上，我想要的是在单击折线图/面积图之外的区域时从原始数据集中获取 x、y（最近/绝对值）的某种方式。
对不起，我现在读了。只有一个问题我不希望交叉点的“Y”值而是希望将 SVG 的 Y 坐标转换为数据相对 Y。
应该使用x 的哪些值来计算距离？
@Wh0RU 抱歉，不确定您的意思。该示例获取离光标位置最近的数据点，这不是您要找的吗？

标签： javascript svg d3.js coffeescript dc.js

【解决方案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]);

【讨论】：

嗨！你知道如何为dc.js 实现它吗？