Question

我有六个父元素（6次“div”），我正在追加三个孩子，最后三个孩子各一个。

d3.select("body").selectAll("div")
    .data(["one", "two", "three", "four", "five", "six"])
    .enter().append("div")
    .attr("class", "parent")
    .text(function (d) {
    return d;
});

d3.selectAll("div")
    .filter(function (d, i) {
    return i > 2 ? true : false;
})
    .append("div")
    .attr("class", "children")
    .text(function (d) {
    return "Name of child: " + d;
});

这导致以下输出：

one
two
three
four
Name of child: four
five
Name of child: five
six
Name of child: six

现在，我想根据数据更新孩子。结果应该有三个孩子，四个孩子和五个孩子。

问题是将进入的孩子三个附加到DOM中的正确位置。例如。以下尝试：

var newChildren = ["three", "four", "five"];

var updateSel = d3.selectAll(".children").data(newChildren, function (d) {
    return d;
});
updateSel.exit().remove();
updateSel.enter().append("div")
    .attr("class", "children")
    .text(function (d) {
    return "Name of child: " + d;
});

会将子三输入错误的位置，因为父节点未被指定为父节点。

one
two
three
four
Name of child: four
five
Name of child: five
six
Name of child: three

Here's the JSFiddle

Answer 1

您的updateSel需要基于父节点，而不是子节点，因为它是您希望可能添加子节点的父节点。

因此，您的初始选择将成为：

var updateSel = d3.selectAll(".parent").data(newChildren, function (d) {
    return d;
});

然后你的删除命令必须删除子项而不是退出选择中的节点：

updateSel.exit().selectAll("*").remove();

最后，您的append命令必须经过筛选才能应用于那些还没有孩子的节点：

updateSel.filter(function() {
    return d3.select(this).select(".children").empty();
}).append("div")
    .attr("class", "children")
    .text(function (d) {
    return "Name of child: " + d;
});

如何输入嵌套元素？

1 个答案: