javascript - 路径上的d3.js工具提示

我所阅读的有关d3.js和工具提示的很多内容都涉及到在图形上具有单独的点。

相反，我的图图使用一条长路径进行渲染。我想知道如何将鼠标悬停方法应用于这样的路径，然后将相应的工具提示div绑定(bind)到该路径

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; });

这会向每个数据点添加一个圆元素，并为每个圆添加一个标题元素。请注意，即使元素不可见，"pointer-events","all"也允许鼠标交互

完整的jsfiddle在这里:
http://jsfiddle.net/xJ3Ke/9/

关于javascript - 路径上的d3.js工具提示，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15235944/