javascript - 删除d3 js中的项目

Question

您正在使用一些字幕项目。当您单击标题项时，d3 应将其删除。为此，我创建了一个函数，从数据数组中删除一个项目，以便 d3 从 DOM 中排除该项目。

包含数据的数组:

[   
    { key: "Product 1", total: 300 }​,
    { key: "Product 2", total: 606 }, 
    { key: "Product 3", total: 151 }​, 
    { key: "Product 4", total: 60 }​
]

代码 d3 编写图表的标题:

    svg.select("#legend")
        .selectAll("text")
        .data(dataNest)
        .exit()
        .remove()

    svg.select("#legend")
        .selectAll("text")
        .data(dataNest)
        .enter()
        .append("text")
        .attr("id", d => d.key)
        .attr("x", (d, i) => (legendSpace/2)+i*legendSpace)
        .attr("y", height + (margin.bottom/2) + 15)
        .text(d => d.key)
        .on("click", d => this.removeLegend(d.key))

从数组中删除被点击项的函数:

this.addRemoveArea(d.key)

每次点击，无论点击的是什么项目，d3 总是删除最后一个标题(首先删除产品 4，然后删除产品 3 ...)，直到完成标题。有什么方法可以将点击的元素与对应于该元素的数据输出相关联吗？

Answer 1

我找到了答案。只需关联 .data() 函数中的数据即可。

.data(dataNest, d => d.key)