圆圈滑行显示数据

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; });如果您想要更好的工具提示，您可以使用醉醺醺的例子。看见这里举个例子。