我目前正在尝试自定义在 http://nvd3.com/ghpages/lineWithFocus.html 上找到的时间序列图表示例.这是使用 nvd3 实现的,nvd3 是 d3 之上的一个库。我希望在顶部图表中获得数据点的工具提示,但也希望能够在相同图表中选择一个范围,就像在示例中底部的“取景器”图表中一样。 p>
为此,我在基本折线图的示例中添加了“画笔”(请参阅 http://nvd3.com/ghpages/line.html)。范围选择就像一个魅力,但是,数据点的工具提示不再起作用,除了刚好超出轴范围的点。看起来,位于画笔区域的数据点不再获得鼠标事件,画笔将它们全部吸收。
线条的数据点接收鼠标事件(特别是鼠标悬停,我不关心点击)需要更改什么?
尝试使用
捕获所有事件d3.select(window).on("...", function)
然后在适用的情况下在数据点上触发一些“鼠标悬停”事件。这是如何实现的(我不想遍历所有数据点然后检查哪个最接近鼠标事件......)?有没有更直接的方法?
最佳答案
如果您在“画笔”上的任何位置检查元素 (Chorme),您会注意到在您 try catch 事件的其他图形元素之后构建的元素。
d3.brush 函数正在创建一个隐藏的背景来捕捉鼠标事件。
// An invisible, mouseable area for starting a new brush.
bg.enter().append("rect")
.attr("class", "background")
.style("visibility", "hidden")
.style("cursor", "crosshair");
因此解决方案是在绘制数据(直线、路径、散点图圆圈等)之前调用画笔。
关于javascript - D3中的鼠标事件和画笔,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11779450/