我读过很多关于d3.js和工具提示的内容,可以参考图表上的各个点.
相反,我的图形图形使用一个长路径来渲染.我想知道如何将鼠标悬停方法应用于这样的路径,然后我会相应地绑定一个工具提示div
http://jsfiddle.net/ericps/xJ3Ke/6/
svg.append("path")
.attr("class", "area")
.attr("clip-path", "url(#clip)")
.style("fill", "url(#gradient)");
解决方法:
您可以设置一个不可见对象层,表示您希望拥有工具提示的每个点,并为这些对象添加鼠标交互.
我用以下内容更新了你的jsfiddle –
svg.selectAll("circle")
.data(data)
.enter().append("circle")
.attr("r", 5)
.style("fill","none")
.style("stroke","none")
.style("pointer-events","all")
.append("title")
.text(function(d) { return "Date: " + formatDate2(d.date) + " Value: " + d.value; });
这会为每个数据点添加一个圆元素,并为每个圆圈添加一个title元素.请注意,即使元素不可见,“指针事件”,“全部”也允许鼠标交互
完整的jsfiddle在这里:
http://jsfiddle.net/xJ3Ke/9/