D3.js d3js更新和维护可视化的结构

在用d3单击[x]后，是否可以（如果是，如何修复render（））正确更新div

    var id_names = {},
    render = function (id) {
      var names = id_names[id],
          divs = d3.select("#filelist").selectAll("div").data(names),
          denter = divs.enter().append("div");

      denter.append("div")
        .classed("txt", true);
      denter.append("div")
        .classed("del", true);

      divs.select("div .txt")
        .text(function (d, i) {return i + " :: " + d});
      divs.select("div .del")
        .text("[x]")
        .on("click", function (d, i) {
          // remove element from array
          id_names[id].splice(i, 1)
          render(id)
        });

      divs.exit().remove()
    };

    // {id: [name, nameN]}
    id_names[11] = ["aaa", "bbb", "cc"]
    render(11)

---

我认为问题在于将

数据

绑定到

div

s，而

denter

s中有更多的

div

s

因此，如果您将一些

类

（或

id

）添加到包含的

div

中，您将获得所需的效果（我希望如此）

请看这里：

或者在这里，核心变化是：

divs = d3.select("#filelist").selectAll(".container")
        .data(name),
denter = divs.enter().append("div")
        .attr('class', 'container');

（旁注：我不喜欢在范围外的函数中修改，因为您在这里使用的是

id\u name

）。这可能会导致非常严重的副作用……）

---

希望这有帮助

您的代码没有

update（）

函数。