d3.js路径上的工具提示

Question

我读过很多关于d3.js和工具提示的内容,可以参考图表上的各个点.

相反,我的图形图形使用一个长路径来渲染.我想知道如何将鼠标悬停方法应用于这样的路径,然后我会相应地绑定一个工具提示div

http://jsfiddle.net/ericps/xJ3Ke/6/

svg.append("path")
.attr("class", "area")
.attr("clip-path", "url(#clip)")
.style("fill", "url(#gradient)");

Answer 1

您可以设置一个不可见对象层,表示您希望拥有工具提示的每个点,并为这些对象添加鼠标交互.

我用以下内容更新了你的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元素.请注意,"pointer-events","all"即使元素不可见,也允许鼠标交互

完整的jsfiddle:http: //jsfiddle.net/xJ3Ke/9/