如果我將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"); 它可以在所有情況下正常工作。

這里的工作代碼

另一方面，您不應該使用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")

這里的工作代碼