Блог

У меня есть дерево, как в примере. Когда я удаляю некоторые узлы, дерево должно быть обновлено. Но я не хочу полностью очищать svg и перерисовывать дерево. Код для удаления:

 function click(d) {
  d.children = d.children[0].children[0].children;
  update(); // there is call inside to link.exit().remove(); and node.exit().remove();
}
 

Проблема в том, что дерево становится поврежденным (после удаления C и D) :

Вот ссылка code — JSfiddle

Каков наилучший способ правильно нарисовать дерево без полной перерисовки?

Я пытался обновить глубину, но не помогло

 function click(d) {
  d.children = d.children[0].children[0].children;
  d.children[d].depth =  d.children[d].depth -2;
  update(); // there is call inside to link.exit().remove(); and node.exit().remove();
}
 

Вам необходимо добавить функции обновления для кругов и ссылок.

Поскольку у вас были только функции добавления и удаления, элементы добавлялись и удалялись должным образом, но когда элемент нуждался в обновлении, ничего не делалось. Добавив функции обновления для кругов и ссылок, когда что-либо изменится, они будут «обновлены» до их нового положения.

 // ** UPDATE CIRCLES ***
node.attr("transform", function(d) { return "translate("   d.y   ","   d.x   ")"; })

// *** UPDATE LINK ***
link.attr("d", diagonal);
 

Вот исправленная скрипка: http://jsfiddle.net/t0mhsauf/15 /

Надеюсь, это поможет.