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

Question

我正在尝试通过简单的鼠标悬停来处理 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/

Answer 1

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

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

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