如果我将 svg 附加到 div，d3 mouseover 事件将不会触发答案

【问题标题】：d3 mouseover event wont fire if I append svg to a div如果我将 svg 附加到 div，d3 mouseover 事件将不会触发
【发布时间】：2017-08-02 00:24:05
【问题描述】：

我试图让一个简单的鼠标悬停在 d3 中的一些矩形上工作。如果我将 SVG 附加到“body”，一切正常（第一行代码）。如果我将选择更改为“.chart1”而不是“body”，则鼠标悬停不起作用。有人见过这个吗？

var chart = d3.select(".chart1").append("svg")
  .attr("width", 250)
  .attr("height", 50);

data = ["a", "b", "c",]

for(var i = 0; i < data.length; i++){
            var rect = chart.append("rect")
              .attr("x", 20*i)
              .attr("y", 10)
              .attr("width", 15)
              .attr("height", 15)

chart.selectAll('rect')
    .on("mouseover", function() {
        d3.select(this)
            .attr("opacity", .5)
    })
    .on("mouseout", function() {
        d3.select(this)
            .attr("opacity", 1)
    });

jsfiddle：https://jsfiddle.net/jasonleehodges/um5f5ysv/

【问题讨论】：

它确实有效：jsfiddle.net/gerardofurtado/8s6nhxhz
与您的问题无关，但您不需要使用 for 循环在 D3 代码中附加元素。这不是惯用的 D3。
是的，不确定我的堆栈中是否有某种类型的碰撞，但它在我的 jsfiddle 中不起作用：jsfiddle.net/jasonleehodges/um5f5ysv
再次：您的 sn-p 中的代码有效。由于指针事件，您的小提琴中的代码不起作用。将 SVG 附加到 body 或 div 之间绝对没有区别。我刚刚投票结束了这个问题。

标签： javascript d3.js svg

【解决方案1】：

问题不是因为您将 svg 附加到 body 或 div 类 .chart1

鼠标悬停不工作的问题就在这里。

var chart = d3.select(".chart1").append("svg")
  .attr("width", 250)
  .attr("height", 50)
  //.style("pointer-events", "none");//WHY DISABLE MOUSE EVENT ON SVG

修复方法是删除 .style("pointer-events", "none"); 它可以在所有情况下正常工作。

工作代码here

另一方面，您不应该使用 for 循环，这不是 d3 方式（正如@Gerardo Furtado 所说）。

所以你的代码使用for:

for(var i = 0; i < data.length; i++){
            var rect = chart.append("rect")
              .attr("x", 20*i)
              .attr("y", 10)
              .attr("width", 15)
              .attr("height", 15)

应该是

var rect = chart.selectAll("rect").data(data).enter().append("rect")
              .attr("x", function(d,i){return 20*i})
              .attr("y", 10)
              .attr("width", 15)
              .attr("height", 15)
              .attr("fill", "#cc004c")
              .attr("title","NBC")
              .attr("data-toggle","tooltip")

工作代码here

【讨论】：

我添加了该样式行以尝试解决问题。如果我从我的小提琴中删除它，它会为小提琴解决它，但如果我删除该行，我的生产应用程序仍然没有解决。如果我将其更改为附加到正文，它确实可以工作。不知道为什么 body 和 div 之间会有区别。
在这种情况下，肯定与风格有关。在您提供的小提琴中，我可以看到指针事件的问题。
感谢您的帮助。这就是样式 - 直接位于 d3 对象下方的引导行向上移动了 25px 并覆盖了 d3（即使该行中没有任何内容），因此它可能隐藏了 d3 以防止鼠标悬停事件。