Как ввести вложенный элемент?

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; 
});