我正在使用D3进行交互式区域图.在鼠标悬停在区域图上时,我想在图表顶部滚动一个点,如下例所示：
http://hci.stanford.edu/jheer/files/zoo/ex/time/multiples.html
http://hci.stanford.edu/jheer/files/zoo/ex/time/multiples.html
一旦我得到鼠标位置(使用d3.mouse),我如何将这些坐标转换为相应的数据？ x轴使用x尺度的倒数(例如x.invert)是简单的.但是,我找不到相应的y坐标.理想情况下,我可以“查找”我的数据中的x坐标,并找到相应的y坐标,但不知道如何使用D3.谢谢！
解决方法
创建自己的查找表实际上比较容易：
/* Create the lookup table */
var table = {};
data.forEach(function(d) {
table[d.x] = d.y;
});
如果您有足够的数据点,这是可行的解决方案,但可能需要使用某种舍入或插值来填充中间的x值.例如,如果您的点之间有一个固定的间距,您可以使用线性内插器,并进行以下计算以获取鼠标悬停时您的圆的坐标：
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的另一个例子
