javascript - D3 : finding graph y-coordinate with mouseover

Question

我正在使用 D3 制作交互式面积图。将鼠标悬停在面积图上时，我希望在图表顶部滚动一个点，如下例所示: http://hci.stanford.edu/jheer/files/zoo/ex/time/multiples.html

一旦获得鼠标位置(使用 d3.mouse)，如何将这些坐标转换为相应的数据？ x 轴直接使用 x 尺度的倒数(例如 x.invert)。但是，我无法为我的图表找到相应的 y 坐标。理想情况下，我可以“查找”数据中的 x 坐标并找到相应的 y 坐标，但不确定如何使用 D3 执行此操作。谢谢!

Answer 1

创建自己的查找表实际上相对容易:

/* Create the lookup table */
var table = {};
data.forEach(function(d) {
    table[d.x] = d.y;
});

如果您有足够的数据点，这是一个可行的解决方案，但您可能需要使用某种舍入或插值器来填充中间 x 值。例如，如果您的点之间有固定间距，您可以使用线性插值器并执行以下计算以在 mouseover 上获取圆的坐标:

var x = d3.mouse(this)[0];
var y;

if ( table[x] === undefined ) {
    var lower = x - (x % SPACING);
    var upper = lower + SPACING;
    var between = d3.interpolateNumber(table[lower], table[upper]);
    y = between( (x % SPACING) / SPACING );
} else {
    y = table[x];
}

这是实际的代码:http://jsfiddle.net/Wexcode/KGxHF/

这是关于如何从 Mike Bostock 执行此操作的另一个示例: http://bl.ocks.org/3025699