鼠标悬停在 d3 矩形上不起作用答案

【问题标题】：mouseover doesn't work on d3 rectangle鼠标悬停在 d3 矩形上不起作用
【发布时间】：2023-03-13 03:38:01
【问题描述】：

我是 d3 的新手。我已经为 3 个矩形的出现编写了下面的代码，并让它们有一些鼠标交互。

svg.append("g").selectAll("rect")
            .data([1,2,3])
            .enter()
            .append("rect")
            .attr("x",function(d,i){return 600+i*50;})
            .attr("y",30)
            .attr("width",40)
            .attr("height",40)
            .attr("fill","blue")
            .on("mouseover",function(d) {

            d3.select(this).append("text")
                .attr("y", "100")
                .attr("x", "500")
                .attr("class", "hover")                 
                .attr("font-family", "sans-serif")
                        .attr("font-size", "12px")
                .style("fill",  "black")
                .text(function(d){console.log("mouseover");
                return "Text I want";})
            })

            .on("mouseout", function(d) {

                d3.select(this).select("text.hover").remove();
            })
            .on("click",function(d){console.log(d);
                if(d==1)
                Pie(array1,array2);
                if(d==2)
                Pie(array3,array4);
                if(d==3)
                Pie(array5,array6);

            })
            .style("opacity",1e-6)
             .transition()
             .duration(1000)
             .style("opacity",0.8);

console.log("mouseover") 出现在控制台上，但浏览器上没有显示任何文本。点击事件适用于正在构建的饼图。谁能发现出了什么问题？提前谢谢你。

【问题讨论】：

标签： javascript d3.js mouseover

【解决方案1】：

在鼠标悬停时：

d3.select(this).append("text")

会将text 附加到rect 但rect 元素不能有子元素。

改成：

svg.append("text")

有效。完整代码示例：

<!DOCTYPE html>
<html>

<head>
  <script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
</head>

<body>
  <script>
  
    var svg = d3.select('body')
      .append('svg')
      .attr('width', 500)
      .attr('height', 500);
  
    svg.append("g").selectAll("rect")
      .data([1, 2, 3])
      .enter()
      .append("rect")
      .attr("x", function(d, i) {
        return 10 + i * 50;
      })
      .attr("y", 30)
      .attr("width", 40)
      .attr("height", 40)
      .attr("fill", "blue")
      .on("mouseover", function(d) {

        svg.append("text")
          .attr("y", "100")
          .attr("x", "200")
          .attr("class", "hover")
          .attr("font-family", "sans-serif")
          .attr("font-size", "12px")
          .style("fill", "black")
          .text(function(d) {
            console.log("mouseover");
            return "Text I want";
          })
      })

    .on("mouseout", function(d) {

        svg.select("text.hover").remove();
      })
      .on("click", function(d) {
        console.log(d);
        if (d == 1)
          Pie(array1, array2);
        if (d == 2)
          Pie(array3, array4);
        if (d == 3)
          Pie(array5, array6);

      })
      .style("opacity", 1e-6)
      .transition()
      .duration(1000)
      .style("opacity", 0.8);
  </script>
</body>

</html>

【讨论】：

谢谢。这就是我想要的。现在工作正常。

【解决方案2】：

我认为你应该为 d3 使用 d3-tip 模块。它提供了非常好的悬停工具提示

http://bl.ocks.org/Caged/6476579

var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function(d) {
     return "<strong>Frequency:</strong> <span style='color:red'>" + d.frequency + "</span>";
 })

在条形或矩形上使用

.on('mouseover', tip.show)
.on('mouseout', tip.hide)

【讨论】：

非常感谢您向我介绍工具提示。我将它们用于我的代码的其他部分。
为了与 d3 v4 兼容，请使用此分支：github.com/VACLab/d3-tip/blob/master/d3-tip.js