时间戳

首页 > 解决方案 > 在 d3 js 中删除一个项目

javascript - 在 d3 js 中删除一个项目

问题描述

您正在使用一些字幕项目。当您单击标题项时，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 ...），直到标题完成。有没有办法将点击的元素与对应于该元素的数据输出相关联？

标签： javascriptd3.js

解决方案

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

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

推荐阅读