Question

是否有可能（如果是的话 - 如何修复render（））在用d3点击[x]后执行正确更新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)

Answer 1

我认为问题在于您将data绑定到div，并且div中有denter个class。

因此，如果您向包含id的内容添加一些div（或divs = d3.select("#filelist").selectAll(".container") .data(name), denter = divs.enter().append("div") .attr('class', 'container');），您将获得所需的效果（我希望如此）。

见这里： JSFiddle

或者在这里，核心发生了变化：

id_name

（旁注：我不喜欢修改一个在外部范围内的函数，因为你在这里使用{"theme": "purple"} ...）。这可能会导致非常讨厌的副作用......）

希望这有帮助！

d3js更新并维护可视化结构

1 个答案: