首页 > 解决方案 > 如何使用 D3.js 删除功能删除项目

问题描述

当我尝试使用以下代码删除一个元素时,我的所有元素都设置为“已更新”,但没有一个被删除。将新项目添加到名为“clients”的列表中可以正常工作,但不能删除。我究竟做错了什么?这是我的代码笔的链接。

let container = d3.select("#container");
    let clients = [{ Name: "Client0"
                   }];
    let count = 1;

    function addNewClient() {
        clients.push({Name: "Client" + count });
        count += 1;
        showData(clients);
    }

    function removeClient() {
        client = clients.slice(0,-1);
        count -= 1;
        showData(clients);
    }

    d3.csv(clients).then(showData); 

    function showData(data) {
        // join the data with all the yet to be created div tags
        let join = container
            .selectAll("div")
            .data(clients);
        // remove from screen those elements that do not have an associated data point
        join.exit().remove();
        // for each data point append a div
        join.enter()
            .append("div")
            .text(d => d.Name + " - New");

        join.text(d => d.Name + ": Updated");
    }

    showData(clients);

    function write(text) {
        container.append("div").text(text);
    }

标签: d3.js

解决方案


推荐阅读