将事件侦听器添加到附加在 d3 中的 <div>

Question

我正在尝试将事件（addeventlistner）添加到附加有 d3 的多个元素。但是，当我单击 时，它不会触发附加的“警报”。有趣的是，这适用于<div>我手动添加的内容。有人可以摆脱吗对此有何看法？

d3.csv("output1.csv",function(data){    
var width = 700,
    height = 600;   
d3.select('body').selectAll("div")
    .data(data)
    .enter()
    .append("div")
    .style("width",30)
    .style('height',30)
    .style("background-color",function(d){
        return d.color;
}) 
var divs = document.getElementsByTagName("div") // this returns array of div elements    
function show(){
        alert("ya")
    }   
for (var i = 0; i < divs.length; i++) {
            divs[i].addEventListener('click',function(){
        alert("yaho")
    })
  } 
})

Answer 1

由于您使用的是 d3，因此请使用 d3 事件侦听器，如下所示。

var divs = d3.select('body').selectAll("div")
        .data(data)
        .enter()
        .append("div")
        .style("width",30)
        .style('height',30)
        .style("background-color",function(d){
            return d.color;
        });

divs.on("click",function(){
          alert("yaho")             
      });

或者

function show(){
   alert("Hi");
}

divs.on("click",show);

与 addEventListeners 绑定的侦听器也将起作用。这是使用类似代码的工作小提琴。JSFiddle