Javascript NVD3折线图——具有独立事件的重叠点

我正在使用nvd3的简单折线图进行项目。用户需要能够以模态形式输入X值，并用点注释图形。它们的条目不会更新图表中的线条，只会更新点注释

我试图通过在

元素上方为注释点创建一个组容器来解决这个问题。nvd3中折线图的

元素似乎是捕获所有事件和委托的层，但我不想使用它来委托给我的注释点

var annotation\u container=d3.选择（'.nvd3.nv-wrap.nv-lineChart>g'）
.插入（“g”，“第一个孩子”）
.attr（“id”、“nv注释容器”）；
var annotation\u groups=注解容器。选择全部（“g”）。数据（数据）；
注释组
.输入（）
.附加（“g”）
.attr（“id”，函数（d）{return d.key；}）
.附加（“g”）
.attr（“id”，“弹出框”）
.style（“填充”，“#0000ff”）
.style（“不透明度”、“0.8”）
.attr（“变换”，“矩阵（0.17443456,0,0,0.2187901,0.55739522,0.48858108）”）
.append（“路径”）
.attr（“id”，“弹出框路径”）
。attr（“d”，“m 99.999,68.332 c0,5.5-4.5,10-10,10 h10 c-5.5,0-10，-4.5-10，-10 v10 c0,4.5 4.5,0 10,0 h79.999 c5.5,0 10,4.5 10,10 v58.332 z”）；
注释组打开（'单击'，函数（e）{
控制台日志（“单击”，e）；
});

问题是，在创建注释组之后，我尝试使用的事件（mouseover、mouseout、click等）都不起作用

问题：

我如何让我的活动发挥作用

有没有更好的方法来实现我的目标

以前是否有人尝试过这种方法并得到了一个有效的实现 谢谢

是的，这是可能的

下面是一个如何执行此操作的示例：

这里的解决方案是添加一个javascript函数，使用NVD3绘制垂直线（仔细阅读注释）：

函数调用（opts）{
//注意！！！css pasth“.nvd3.nv focus.nv linesWrap”取决于您使用的图表类型，lineChart将仅使用“.nvd3.nv linesWrap”！
如果（！（d3.select（'#'+opts.id+'css pasth.nvd3.nv focus.nv“取决于您使用的图表类型，线形图表将仅使用-linesWrap'）。选择（'.vertical lines'）[0][0]））{
//使用.vertical lines类添加新的g元素；使用css调试器验证
d3.选择（'#'+opts.id+'.nvd3.nv focus.nv linesWrap'）。附加（'g'））
.attr（'类'，'垂直线'）
}
vertLines=d3.选择（'#'+opts.id+'.nvd3.nv focus.nv linesWrap'）。选择（'.vertical line'）。选择全部（'.vertical line'））
.数据(
[{
“日期”：新日期（“1967-11-30”），
“标签”：“要突出的东西”
}, {
“日期”：新日期（“2001-11-30”），
‘标签’：‘2001年的亮点’
}])
var vertG=vertLines.enter（）
.append（'g'）
.attr（'class'，'vertical line'）
追加（'svg:line'）
vertG.append（'text'）
vertLines.exit（）.remove（）
//小心2：chart.xAxis.scale（）比例取决于您在nvd3图表中定义x轴的方式…如果您使用的是时间戳，（d.date/60/60/24/1000）变为（d.date）
垂直线。选择全部（'线'）
.attr（'x1'，函数（d）{
返回图表.xAxis.scale（）（d.date/60/60/24/1000）
})
.attr（'x2'，函数（d）{
返回图表.xAxis.scale（）（d.date/60/60/24/1000）
})
.attr（'y1'，chart.yAxis.scale（）.range（）[0]）
.attr（'y2'，chart.yAxis.scale（）.range（）[1]）
.style（'笔划'，'红色'）
vertLines.selectAll（'text'）
.文本（功能（d）{
返回d.标签
})
.attr（'dy'，'1em'）
//x位置；更改上面的dy，以便进行轻微调整，但主要是
//更改d.date/60/60/24/1000
//y放置；将2更改为要垂直放置的位置
//旋转-90，但可以随意更改为您想要的
.attr（'transform'，函数（d）{
返回“translate”（）+
图表X轴刻度（）（d.date/60/60/24/1000）+
',' +
chart.yAxis.scale（）（2）+
“）旋转（-90）”
})
//你也可以随心所欲地设计风格
//下面是一个更改字体大小的示例
.style（'font-size'，'80%”）
}

并在nv.addGraph回调中调用此方法：

var sharedChart=null；//图表上的共享参考
nv.addGraph（函数（）{
.....
sharedChart=图表；
收益表；
,
函数（）{
DrawVerticalline（opts、sharedChart）；
}
);

使用opts…（显然您并不真正需要它）：

---

希望这对我有所帮助，我花了很长时间才找到它并使它工作起来！

卡米尔的答案对我来说不太合适，我怀疑我有一个不同版本的nvd3。但它确实帮助我找到了我需要做的事情。我删除了顶部的if块，顶部的选择器无效。取而代之的是我使用了：

vertLines = d3.select('.nvd3 .nv-linesWrap')
    .select('.nv-groups')
    .selectAll('.nv-groups')
    .data(chartVersions)

---

尽管我的

元素是第一个子元素，但肯定有什么东西杀死了我的事件。当我将它移动到

的第一个子元素时，我可以获取所有事件。尝试在新元素上设置

指针事件：无。@Larskothoff:是的，我已经尝试过了。似乎还有其他东西限制了它。我想不出来。
vertLines = d3.select('.nvd3 .nv-linesWrap')
    .select('.nv-groups')
    .selectAll('.nv-groups')
    .data(chartVersions)