Вот что похоже на то, что происходит в моем коде: https://codepen.io/anon/pen/zJmvXa?editors=1010
Нажмите кнопку "Обновить", чтобы увидеть проблему.
Проблема в этом CodePen, является его единственным перерисовкой первого элемента (Myriel).
Я думаю, что это должно быть вокруг входа, выхода или слияния, но я не совсем понимаю, что происходит.
Я думал, что слияние заключается в объединении существующих данных с новыми, и единственными данными, которые должны войти в ввод, должны быть новые данные. И выход для удаления избыточных данных?
Как этот граф имеет как круги, так и текст, должно ли слияние быть сделанным на элементе "g", который содержит эти?
Возможно, это связано с функцией данных:
.data(dataset1.nodes, function(d, i) {
return d;
});
Если я изменю это, чтобы использовать d.id, он снова отображает все. Я предполагаю, что это связано с данными, имеющими атрибут id. Как это должно быть сделано?
// Apply the general update pattern to the nodes.
forceNetwork.node = d3
.select("#nodesContainer")
.selectAll("g.network-node")
.data(dataset1.nodes, function(d, i) {
return d
});
forceNetwork.node.exit().remove();
forceNetwork.nodeEnter = forceNetwork.node
.enter()
.append("g")
.attr("id", function(d, i) {
return "network-g-node-" + d.id;
})
.attr("class", function(d, i) {
return "network-node";
})
.call(
d3
.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended)
).merge(forceNetwork.node);
forceNetwork.nodeEnter
.append("circle")
.attr("id", function(d) {
return d.id;
})
.attr("class", "networkviewer-node")
.attr("fill", "red")
.attr("r", 20);
// Append images
forceNetwork.nodeEnter
.append("text")
.attr("dx", 12)
.attr("dy", ".35em")
.text(function(d) { return d.id });
Проблема здесь в том, что вы объединяете обновление и вводите выбор...
forceNetwork.nodeEnter = forceNetwork.node
.enter()
.merge(forceNetwork.node);
... и после этого добавление кругов (и строк):
forceNetwork.nodeEnter
.append("circle")
Это обязательно дублирует круги и линии.
Вместо этого объедините выделение после добавления окружностей и строк к выбору ввода, а также измените выделение в вашей функции tick
.
Вот отредактированный код: https://codepen.io/anon/pen/GXYozm?editors=1010
id
this.id
данных, если только вы не используетеthis.id
Посмотрите здесь, в примере "Ford Jarrah Kown ...": github.com/d3/d3-selection/blob/master/README.md#selection_data