tooltip - 鼠标悬停在圆上时显示数据

Question

我有一组数据，正在以散点图形式绘制。当我将鼠标悬停在其中一个圆圈上时，我希望它弹出数据(例如 x、y 值，也许更多)。这是我尝试使用的:

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);}); });

我怀疑我需要提供有关要输入哪些数据的更多信息？

Answer 1

我假设您想要的是工具提示。最简单的方法是将 svg:title 元素附加到每个圆圈，因为浏览器将负责显示工具提示，并且您不需要鼠标处理程序。代码类似于

vis.selectAll("circle")
   .data(datafiltered).enter().append("svg:circle")
   ...
   .append("svg:title")
   .text(function(d) { return d.x; });

如果您想要更精美的工具提示，您可以使用tipsy。请参阅here举个例子。