Question

我遇到了D3的一个基本问题，虽然我确定已经回答了，但我似乎无法找到合适的关键字。

我有一个简单的数据绑定与嵌套元素正确呈现，但当我尝试删除元素时，嵌套元素重复，因为我没有正确清除它们。清除嵌套元素的正确方法是什么？

 var ul = d3.select("body")
    .append("ul")
 
 function update(data) {
  
  var lis = ul
    .selectAll("li")
    .data(data);
    
  lis.exit().remove()
  
  var newLis = lis  
    .enter()
    .append("li");

  lis.merge(newLis)
    .append("a")
    .attr("href", "#")
    .text(d => d)
    .on("click", removeItem);
    
  function removeItem(n) {
    arr.splice(arr.indexOf(n), 1);
    update(arr);
  }

 }

var arr = d3.range(5);

update(arr);

body {
 font:  16px/145% sans-serif;
}

Click any number to remove it

<script src="https://d3js.org/d3.v5.min.js"></script>

Answer 1

麻烦在于：

lis.merge(newLis)
  .append("a")

您正在合并输入/更新和附加。您只想附加在回车上。怎么样：

<!DOCTYPE html>
<html>

<body>
  Click any number to remove it

  <script src="https://d3js.org/d3.v5.min.js"></script>

  <script>
    var ul = d3.select("body")
      .append("ul")

    function update(data) {

      var lis = ul
        .selectAll("li")
        .data(data);

      lis.exit().remove()

      // enter
      var newLis = lis
        .enter()
        .append("li");
        
      // enter append the As 
      newLis
        .append("a")
        .attr("href", "#")
        .on("click", removeItem);

      // merge enter/update
      // select the as set text
      lis.merge(newLis)
        .select("a")
        .text(d => d)

      function removeItem(n) {
        arr.splice(arr.indexOf(n), 1);
        update(arr);
      }

    }

    var arr = d3.range(5);

    update(arr);
  </script>
</body>

</html>

在D3中退出并更新嵌套的嵌套元素

1 个答案: