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

Question

假设我使用数字本身作为键将数字列表绑定到“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; });

Answer 2

我发现在更新后使用 selection.order 似乎可行，但它仍然不完全令人满意，因为我想在插入时这样做。