Javascript 使用d3-tip.js显示悬停时的工具提示

我想显示悬停现有svg元素的工具提示

在中，要悬停的元素是在绑定数据时创建的。在我的例子中，这些元素已经存在于DOM（圆）中。所以我需要在

selectedElms.enter（）之后立即选择它们

我的问题是如何在圆上应用
tip.show
和
tip.hide


var数据=[{
列车：1
}, {
列车：2
}, {
列车：3
}, {
列车：4
}]
var svg=d3。选择（'svg'）
var tip=d3.tip（）
.attr（'class'，'d3 tip'）
.偏移量（[-10,0]）
.html（函数（d）{
返回“频率：”+d.train+”；
})
svg.call（tip）；
让selectedElms=d3。selectAll（'circle'）。数据（数据，函数（d）{
如果（d！=未定义）{
返程列车
}
})
console.log（'hi'）
选择delms.enter（）.on（'mouseover'，tip.show）。on（'mouseout'，tip.hide）
只有两件事需要纠正，才能使其按预期工作：

正如我在本主题的第一篇文章中提到的，在将数据与DOM元素匹配时，会执行两次键函数。要将数据绑定到现有DOM元素，必须使用中介绍的技术。在您的情况下，键函数变为

.data(data, function(d) {
  return (d && d.train) || this.id;
})

第一个表达式
d&&d.train
检查
d
是否引用实际值，如果为true，则计算其属性
.train
。当为
data
参数中的每个数据执行键函数时，就是这种情况。如果
d
为
undefined
，则对第二个表达式
this.id
进行有条件的计算，这是在为所选元素（即已存在的元素）执行键函数时的情况。如果找到匹配项，则相应的基准将绑定到元素

您只对更新DOM中已经存在的元素感兴趣。因此，您根本不需要使用enter选择。
.data（）
返回的更新选择就足够了。您只需放弃对
.enter（）
的调用即可

请查看以下代码段以查看其实际操作：


var数据=[{
列车：1
}, {
列车：2
}, {
列车：3
}, {
列车：4
}]
var svg=d3。选择（'svg'）
var tip=d3.tip（）
.attr（'class'，'d3 tip'）
.偏移量（[-10,0]）
.html（函数（d）{
返回“频率：”+d.train+”；
})
svg.call（tip）；
让selectedElms=d3。selectAll（'圆圈'）
.数据（数据、功能（d）{
返回（d&d.train）| | this.id；
})
精选影片
.on（'mouseover'，tip.show）
.on（'mouseout'，tip.hide）

@RachelGallen好的，那么让我们来清理这些评论。@infodev您必须在代码片段中包含两个版本的D3，后者胜过前者。您的d3提示版本似乎不适用于d3 v4。不过，这可能只是创建演示时的一个副本和过去的错误。请注意，在我的答案中，我放弃了v4而选择了v3。您可能需要在自己的代码中对此进行更正。在我的真实应用程序上实现解决方案时，我遇到了一个问题
此.id不存在（Im使用Angular）
属性“id”在类型“Window”上不存在