d3.js工具提示在路径 [英] d3.js tooltips on path

问题描述

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

a lot of what I've read regarding d3.js and tooltips makes reference to having individual points on a graph.

而是我的图形图使用一个长路径渲染。我想知道如何将鼠标悬停方法应用到这样的路径，其中我将绑定一个工具提示div相应

instead, my graph graph is using one long path to render. I was wondering how I would apply mouseover methods to such a path, where I would then tie a tooltip div accordingly

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

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

推荐答案

您可以设置一个不可见对象层，

You can set a layer of invisible objects representing each point you'd like to have a tooltip for, and add mouse interactions to those objects.

我已经更新了您的jsfiddle的以下内容 -

I've updated your jsfiddle with the following -

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允许鼠标交互，即使元素不可见。

This adds a circle element to each data point, and a title element to each of those circles. Note that the "pointer-events","all" allows the mouse interactions even though the elements are invisible

full jsfiddle here：
http://jsfiddle.net/xJ3Ke/9/

full jsfiddle here: http://jsfiddle.net/xJ3Ke/9/

这篇关于d3.js工具提示在路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！