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

我试图获得一个简单的鼠标悬停在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/

最佳答案

问题不是因为您要使用类.chart1将svg附加到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

关于javascript - 如果我将svg附加到div，则d3 mouseover事件不会触发，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45449570/