嗨,我有一张面积图,里面有几张X(年)& Y(价格)值.正如我发现有一种简单的方法来获取X,当用户点击其中一个点然而点击外线时,Y可以为图表提供值,即SVG / Chart-Body区域只能提供X,Y这些是平面的坐标而不是数据.
点图表：
circles = c.svg().selectAll 'circle.dot'
circles.on 'click',(d) ->
console.log 'POINT','Datum:',d@H_502_5@
O / P：
POINT Datum:
{x: Fri Feb 01 1980 00:00:00 GMT+0000 (GMT Standard Time),y: 666}@H_502_5@
点外图：
svg.on 'click',() ->
console.log 'SVG',d3.mouse(@)@H_502_5@
O / P：
SVG [605.5,394.5]@H_502_5@
现在有什么办法可以在点击SVG时获得最近的数据坐标吗？例如
SVG [605.5,394.5]将是(最近[X,Y]使用的东西)
{x: Fri Feb 01 1980 00:00:00 GMT+0000 (GMT Standard Time),y: 666}@H_502_5@
或者其他一些方法将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},.
.
.
]@H_502_5@
解决方法
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]);@H_502_5@
