Question

新手在这里。我正在尝试将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>
    ...

在控制台

中

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

这会将li添加到body

的末尾

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

更新

做了一些实验，并得到了一个工作。但是，需要理解为什么早期的不起作用？

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

Answer 1

在您的第一次尝试中，您没有为D3提供要追加的元素，因此它只会附加到文档的末尾。选择ul#items然后附加到li，您就可以成功添加一个data，同时将li数组绑定到ul#items的所有li子项。由于您的data数组中只有5个enter()个项目和6个项目，因此调用了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

我们可以选择data并绑定updateData。调用enter()时，D3会评估是否有更多dom元素而非数据元素，并选择是否相应地调用exit()或public class MyAdapter extends ArrayAdapter<T> { public PackageAdapter(Context context, ArrayList<T> data) { super(context, 0, data); } @Override public View getView(int position, View convertView, ViewGroup parent) { Model model = getItem(position); ViewHolder vh; if (convertView == null) { vh = new ViewHolder(); LayoutInflater inflater = LayoutInflater.from(getContext()); convertView = inflater.inflate(R.layout.item_list, parent, false); vh.imageItem = (ImageView) convertView.findViewById(R.id.iv_item_image); vh.textViewItem = (TextView) convertView.findViewById(R.id.tv_item_name); convertView.setTag(vh); } else { vh = (ViewHolder) convertView.getTag(); } vh.textViewItem.setText(model.getName()); Picasso.with(context) .load(model.getImagePath()) .into(vh.imageItem); return convertView; } public static class ViewHolder { ImageView imageItem; TextView textViewItem; } }。我们还有一个更新程序（将文本更改为已给出的新值）。希望这能解释您所体验到的性质。在D3中有关于输入，更新，退出的详细阅读。一旦你明白你可以轻松地做很多复杂的事情。

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

1 个答案: