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

Question

我读到的关于 d3.js 和工具提示的很多内容都提到了在图表上有单独的点。

相反，我的图形图使用一条长路径进行渲染。我想知道如何将鼠标悬停方法应用于这样的路径，然后相应地绑定(bind)一个工具提示 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; });

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

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