D3 js Иерархическое связывание краев Формат данных

Ответ 1

Как описано в документах для Bundle Layout, макет применяется к массиву ссылок, каждый из которых имеет source и свойство target, указывающее на узлы на двух концах ссылки. Кроме того, этим двум узлам нужен атрибут parent, который указывает на родительский node в иерархии.

Эти данные (в идеале) исходят из Cluster Layout, который позиционирует узлы до объединения ссылок. Макет кластера будет генерировать данные, необходимые для компоновки пакетов (функция cluster.nodes возвращает узлы с не только свойствами parent, а cluster.links возвращает ссылки с source и target). Это означает, что вам просто нужно сделать структуру кластера счастливой, и все будет в порядке.

Есть несколько проблем с вашим кодом как написано. В общем, вместо того, чтобы модифицировать ваши данные в соответствии с визуализацией, которую вы скопировали с примера, лучше практиковать обновление различных аксессуаров D3 для использования формата данных, которые у вас есть. Вот почему они там.

Визуализация, которую вы скопировали, более согласована в процессе очистки данных, поэтому вы внесли некоторые проблемы. Мы просто обойдем их, но вы, вероятно, должны потратить некоторое время на правильное решение. Первая проблема - ошибка, которую вы отметили: TypeError: node.parent.children is undefined. Это связано с тем, что вы переходите к строке 1483 в find и пытаетесь добавить ребенка в список, который не существует. Мы можем пойти вперед и просто проконтролировать это, добавив конкретную проверку для этого (хотя, как уже упоминалось, вы должны просто очистить, как это обрабатывается):

if (typeof d.children === 'undefined') {
    d.children = []
}

Также вы добавляете root node с именем пустой строки. Это связано с тем, что в строке 1481 вы вызываете find независимо от длины подстроки. Проверяя возвращаемое значение вызова на lastIndexOf, вы узнаете, имеет ли node родительский элемент или нет, а в последнем случае установите parent в null (как документация утверждает, родительский - родительский node или null для корня).

Как только мы закончим эти проблемы, вы начнете видеть TypeError: n is undefined. Это связано с тем, что ваши данные неполны: у вас есть ссылки на узлы, которые не существуют, поэтому в строке 1510 вы добавляете ссылку, которая не имеет свойства target, поэтому при попытке связывания ссылок макет не выполняется. На данный момент это можно игнорировать, только добавляя ссылки на узлы, которые существуют, но опять-таки вы, вероятно, должны исправить это, а не позволить ему быть.

if (i in map) {
    imports.push({ source: map[d.name], target: map[i] });
}

Длинные и короткие, читайте документы, используйте ваш отладчик и не копируйте-вставляйте код, не тратя времени на его понимание.

jsfiddle