Javascript 为D3中的动态数据生成工具提示

我有一个散点图，类似于：

我想为每个组合提供鼠标悬停的工具提示。我当前拥有的工具提示代码如下所示：

var tooltip = d3.select("body").append("div")  // tooltip code
   .attr("class", "tooltip")
   .style("opacity", 0);

 var circles = svg.selectAll(".dot")
      .data(data)
    .enter().append("circle")
      .attr("class", "dot")
      .attr("r", 3.5)
      .attr("cx", function(d) { return x(d.petalWidth); })
      .attr("cy", function(d) { return y(d.petalLength); })
      .style("fill", function(d) { return color(d.species); })
      .on("mouseover", function(d) {
         tooltip.transition()
            .duration(200)
            .style("opacity", 1.0);
         tooltip.html(d.petalLength+", "+d.petalWidth)
            .style("left", (d3.event.pageX + 5) + "px")
            .style("top", (d3.event.pageY - 18) + "px");
      })
      .on("mouseout", function(d) {
         tooltip.transition()
            .duration(500)
            .style("opacity", 0);
      });

这将无法为除petalWidth和d.petalLength以外的组合返回正确的工具提示

有没有办法知道选择了哪个组合以及组合的相关数值？

要做到这一点：

首先将刀具提示信息存储在新变量（displayX/displayY）中，如下所示：

.attr("cx", function(d) {
          d.displayX = d.petalWidth;//so displayX holds the x info
          return x(d.petalWidth);

        })
        .attr("cy", function(d) {
          d.displayY = d.petalLength;//so displayY holds the y info
          return y(d.petalLength);
        })

设置组合时，相应地重置变量

 svg.selectAll(".dot").transition().attr("cy", function(d) {
          d.displayY = d[yAxy];//reset the variable displayY
          return y(d[yAxy]);
        });

同样适用于

svg.selectAll(".dot").transition().attr("cx", function(d) {
  d.displayX = d[xAxy];//reset the variable displayX
  return x(d[xAxy]);
});

现在在工具提示中，鼠标悬停使用变量（displayX/displayY）

工作代码

---

希望这有帮助

你能告诉我如何增加鼠标上方圆圈的大小吗？而且，半径应该回到鼠标的原始大小？我尝试在mouseover函数中插入.attr（“r”，6.5），在mouseout中插入.attr（“r”，4.5）。这不起作用。您可以在鼠标悬停时这样做

d3。选择（This）.transition（）.duration（200）.attr（“r”，10）

以增加此处的半径工作代码

 .on("mouseover", function(d) {
          tooltip.transition()
            .duration(200)
            .style("opacity", 1.0);
          tooltip.html(d.displayY + ", " + d.displayX)//use displayX and displayY
            .style("left", (d3.event.pageX + 5) + "px")
            .style("top", (d3.event.pageY - 18) + "px");
        })
        .on("mouseout", function(d) {
          tooltip.transition()
            .duration(500)
            .style("opacity", 0);
        });