javascript - 如何在与其数据对应的位置插入 Enter() 选择？

Question

假设我使用数字本身作为键将数字列表绑定(bind)到“li”元素。因此，如果我从 [1,2] 开始，那么我会得到:

1

2

现在，如果我将该列表更新为 [1,3,2]，那么我希望 HTML 看起来像:

1

3

2

我一生都无法弄清楚如何做到这一点，因为如果我只是执行 Enter().append('li')，那么输入选择是 3，因此 HTML 看起来像:

1

2

3

(选择也有 insert()，但它只接受常量值，而不接受回调。)

Answer 1

您还需要进行更新:

var container = d3.select("ul");
var selection = container.selectAll("li").data([1, 3, 2]);

// Enter
selection.enter().append("li");

// Update
selection.text(function(d) { return d; });