尝试使用 d3 在鼠标悬停时仅显示一个工具提示

我正在尝试获取一些工具提示来处理我的 d3 代码。我简化了这段代码，如下所示。

目前，代码生成 6 个移动圆圈，其名称与之相关，控制台.log显示，当我将鼠标悬停在每个圆圈上时，会记录其关联的名称。

此外，当我将鼠标悬停在圆圈上时，名称标签会出现在圆圈附近。但是，标签出现在所有圆圈上，我只希望标签出现在光标悬停的圆圈上。

我还对添加鼠标退出或任何东西不感兴趣，只是想得到它，以便只有悬停在圆圈上才能显示标签。关于如何做到这一点的任何建议？

以下是我的代码当前的样子：

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script type="text/javascript">
var names = ["Jack","Anne","Jacob","Mary","Michael","Lisa"];
var width = 960,
    height = 500;
var n = names.length,
    m = 12,
    degrees = 180 / Math.PI;
var bubbles = d3.range(n).map(function() {
  var x = Math.random() * width,
      y = Math.random() * height;
  return {
    vx: Math.random() * 2 - 1,
    vy: Math.random() * 2 - 1,
    path: d3.range(m).map(function() { return [x, y]; }),
    count: 0
  };
});
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
var g = svg.selectAll("g")
    .data(bubbles)
  .enter().append("g")
  .on("mouseover", function(d,i){console.log(names[i])}); 
  var labels = g.selectAll("text")
        .data(bubbles)
        .enter().append("text")
        .attr("dy",".35em")
        .attr("class", "tooltip")
        .style("visibility", "hidden")
        .text(function(d,i){return names[i]})
var head = g.selectAll("circle")
    .data(bubbles)
    .enter().append("circle")
    .attr("r", 6)
    .on("mouseover", function(d,i) {
                labels.style("visibility","visible")
                          })
d3.timer(function() {
  for (var i = -1; ++i < n;) {
    var bubble = bubbles[i],
        path = bubble.path,
        dx = bubble.vx,
        dy = bubble.vy,
        x = path[0][0] += dx,
        y = path[0][1] += dy,
        speed = Math.sqrt(dx * dx + dy * dy),
        count = speed * 10,
        k1 = -5 - speed / 3;
    if (x < 0 || x > width) bubble.vx *= -1;
    if (y < 0 || y > height) bubble.vy *= -1;
      for (var j = 0; ++j < m;) {
      var vx = x - path[j][0],
          vy = y - path[j][1],
          k2 = Math.sin(((bubble.count += count) + j * 3) / 300) / speed;
      path[j][0] = (x += dx / speed * k1) - dy * k2;
      path[j][1] = (y += dy / speed * k1) + dx * k2;
      speed = Math.sqrt((dx = vx) * dx + (dy = vy) * dy);
    }
  }
  labels.attr("transform", labelsTransform);
  head.attr("transform", headTransform);
});
function headTransform(d) {
  return "translate(" + d.path[0] + ")rotate(" + Math.atan2(d.vy, d.vx) * degrees + ")";
}
function labelsTransform(d) {
  return "translate(" + d.path[0]  + ")translate(10)";
}
</script>
<body>
</html>

这是我关于堆栈溢出的第一个问题，如果我的问题格式或呈现不正确，很抱歉！任何帮助将不胜感激，即使是关于如何更好地提出我的问题！

欢迎来到堆栈溢出！ :)

您遇到的问题可以追溯到以下代码部分：

var head = g.selectAll("circle")
    .data(bubbles)
    .enter().append("circle")
    .attr("r", 6)
    .on("mouseover", function(d,i) {
         labels.style("visibility","visible")
    })

这说明当用户mouseover任何圆圈时，使所有标签可见。你可能想要这样的东西

    .on("mouseover", function(d,i) {
         // only make visible the current mouseover-ed point
         labels.filter(function(p){
            if(p === d) d3.select(this).style("visibility","visible");
            else d3.select(this).style("visibility","hidden");
         });
    })

相关内容

最新更新

热门标签：