D3.js 如何将列表项添加到D3中现有的项目列表中？

我是新手。我正在尝试将

li

添加到现有列表中，但未得到预期结果。我想把它添加到列表的末尾

   ... 
   <ul id="items">
       <li class="item">One</li>
       <li class="item">Two</li>
       <li class="item">Three</li>
       <li class="item">Four</li>
       <li class="item">Five</li>
    </ul>
    ...

这会将

li

添加到

body

...
</body>
<li class="item">a text</li>
...

---

在第一次尝试中，您没有向D3提供要附加的元素，因此它只是附加到文档的末尾。通过选择

ul#items

，然后添加到它，当您将

数据

数组绑定到

ul#items

的所有

li

子项时，您成功地添加了一个额外的

li

。由于在

数据

数组中只有5个

li

项和6个项，因此调用了

enter（）

方法，该方法附加了一个额外的

li

。试试这个代码并考虑正在发生的事情：

var data = [1,2,3,4,5];

function updateData(data) {
  var item = d3.select('#items')
    .selectAll('li')
    .data(data);

// Enter
  item
    .enter()
    .append('li')
    .attr('class', 'item')
    .text(function(d) { return 'List item ' + d });

// Update
  item
    .text(function(d) { return 'Updated value to' + d });

// Exit
  item.exit().remove();
}

updateData(data);

setTimeout(function() {
  var newData = data.map(function(v) {
    return v * 2;
  });

  updateData(newData)
}, 3000);

setTimeout(function() {
  var newData = data.concat(data);

  updateData(newData)
}, 6000);

setTimeout(function() {

  updateData(data)
}, 9000);

我们可以选择

ul#items

并将

数据绑定到它。调用
updateData
时，D3将评估dom元素是否多于数据元素，并选择相应地调用
enter（）
还是
exit（）
。我们还有一个更新过程（将文本更改为给定的新值）。希望这能解释你所经历的事情的本质。仔细阅读D3中的输入、更新和退出。一旦你明白了，你真的可以轻松地做很多复杂的事情

d3.select('#items')
   .selectAll('.item')
   .data([1,2,3,4,5,6])
   .enter()
   .append('li')
   .text('a text')
   .classed('item',true);

var data = [1,2,3,4,5];

function updateData(data) {
  var item = d3.select('#items')
    .selectAll('li')
    .data(data);

// Enter
  item
    .enter()
    .append('li')
    .attr('class', 'item')
    .text(function(d) { return 'List item ' + d });

// Update
  item
    .text(function(d) { return 'Updated value to' + d });

// Exit
  item.exit().remove();
}

updateData(data);

setTimeout(function() {
  var newData = data.map(function(v) {
    return v * 2;
  });

  updateData(newData)
}, 3000);

setTimeout(function() {
  var newData = data.concat(data);

  updateData(newData)
}, 6000);

setTimeout(function() {

  updateData(data)
}, 9000);