问题描述
很多我所阅读的有关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
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:
full jsfiddle here:http://jsfiddle.net/xJ3Ke/9/
这篇关于d3.js工具提示在路径的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!