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

【问题标题】：How to insert enter() selections at locations corresponding to its data?如何在与其数据对应的位置插入 enter() 选择？
【发布时间】：2012-08-07 02:28:38
【问题描述】：

假设我使用数字本身作为键将数字列表绑定到“li”元素。所以如果我从 [1,2] 开始，那么我得到：

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

我这辈子都不知道怎么做，因为如果我只做一个 enter().append('li')，那么输入选择是 3，所以 HTML 看起来像：

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

【问题讨论】：

标签： javascript d3.js

【解决方案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; });

【讨论】：

【解决方案2】：

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

【讨论】：

使用 selection.order。如果您对数据连接使用键功能，它还可以确保您的更新选择的顺序正确。