在圆形的鼠标悬停时显示数据 [英] Show data on mouseover of circle
问题描述
我有一组数据,我在散点图绘制。当鼠标悬停在其中一个圆圈上时,我希望它弹出数据(如x,y值,或许更多)。这里是我尝试使用:
I have a set of data that I am plotting in a scatter. When I mouseover one of the circles I would like it to popup with data (like x, y values, maybe more). Here is what I tried using:
vis.selectAll("circle")
.data(datafiltered).enter().append("svg:circle")
.attr("cx", function(d) { return x(d.x);})
.attr("cy", function(d) {return y(d.y)})
.attr("fill", "red").attr("r", 15)
.on("mouseover", function() {
d3.select(this).enter().append("text")
.text(function(d) {return d.x;})
.attr("x", function(d) {return x(d.x);})
.attr("y", function (d) {return y(d.y);}); });
我怀疑我需要提供更多信息才能输入什么数据?
I suspect I need to be more informative about what data to enter?
推荐答案
我假设你想要的是一个工具提示。最简单的方法是将 svg:title
元素附加到每个圆圈,因为浏览器会处理显示工具提示,并且不需要鼠标拖拉器。代码将是
I assume that what you want is a tooltip. The easiest way to do this is to append an svg:title
element to each circle, as the browser will take care of showing the tooltip and you don't need the mousehandler. The code would be something like
vis.selectAll("circle")
.data(datafiltered).enter().append("svg:circle")
...
.append("svg:title")
.text(function(d) { return d.x; });
如果你想要fancier工具提示,你可以使用tipsy例如。有关示例,请参见此处。
If you want fancier tooltips, you could use tipsy for example. See here for an example.
这篇关于在圆形的鼠标悬停时显示数据的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!