addEventListener 不适用于 d3js 中的追加方法添加的元素

Question

我的D3js javascript代码。我添加了id为"title"的div标记。你可以在下面查看。

const movieList = d3.select('#movielist');
movieData.forEach(function (movie) {
movieList.append('div')
.property('id', 'title')
.style('width', titleWidth+'px')
.style('height', titleHeight+'px')
.append('p')
.text(movie.name);
});
const title = document.getElementById('title');
title.addEventListener('click', function (e) {
console.log(e);
})

当我做console.log(title)时，我可以看到title的存在。但当我使用addEventListener时，什么都不会发生。。

Answer 1

对问题的评论让您了解了如何使代码按原样工作。但实际上，使用D3并没有多大意义。如果您希望使用D3，让我们按预期使用D3。D3的核心功能围绕着选择和数据绑定，您在上面没有使用这些功能，而是尝试：

const movieList = d3.select('#movielist');

const movies = movieList.selectAll(null)
.data(movieData)
.enter()
.append("div")
.style("width", titleWidth+"px")
.style("height", titleHeight+"px")
// d3v5 and before:
.on("click", function(d) {
// do something with the datum bound to each div.
})
// or d3v6:
.on("click", function(event,d) {
// do something with the datum bound to each div.
})

movies.append("p")
.text(function(d) {
return d.name;
})

这避免了使用循环，将数据绑定到元素(function(d)中的d，d是movieData数组中的单个项(。绑定的数据也被传递给附加了.append()的子元素，因此当将每个电影的名称添加到子p时，就会写入正确的名称。

数据绑定使以后对div的操作更容易，因为您可以根据绑定的数据而不是div的属性来进行操作。上面还使用d3附加一个事件侦听器(对于v3-v5和v6，只使用其中一个(，并将绑定的数据传递给该事件侦听器。

有很多资源可以解释selectAll((.data((.enter((循环，所以我在这里不这么做，只是说通过选择null，我们创建了一个空选择，当我们将数据绑定到它时，数据数组中的每个项都由enter选择中的一个元素表示。D3在内部处理循环，因此缺少显式循环。

是的，你可以用普通的老式javascript来完成这一切——也相当容易；然而，这个问题使用了D3，这个答案显示了完成手头任务的规范方法。