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 ...），直到字幕完成为止。有什么方法可以将clicked元素与对应于该元素的数据输出相关联？

Answer 1

我找到了答案。只需在.data（）函数中关联数据即可。

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

在d3 js中删除项目

1 个答案: