显示鼠标悬停在圆圈上的数据 [英] 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; });

如果您想要更高级的工具提示，例如可以使用tipsy.有关示例，请参见此处.

If you want fancier tooltips, you could use tipsy for example. See here for an example.

这篇关于显示鼠标悬停在圆圈上的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！