Question

我正在尝试将事件（addeventlistner）添加到附加了d3的多个元素。但是，当我点击它时，它不会触发附加的＆＃34;警告＆＃34;。有趣的是，这有效在<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

addeventlistener到<div>附加在d3 </div>中

1 个答案: