鼠标悬停不适用于 d3 矩形

Question

我是 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") 出现在控制台，但没有文本显示在浏览器。单击事件适用于正在构建的饼图。任何人都可以发现出了什么问题吗？提前谢谢你。

Answer 1

我认为你应该为 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)

Answer 2

鼠标悬停在：

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>

鼠标悬停不适用于 d3 矩形

mouseover doesn't work on d3 rectangle

javascript

mouseover

d3.js