Включает ли d3.js компоновку динамическое связывание ссылок? - программирование
Подтвердить что ты не робот

Включает ли d3.js компоновку динамическое связывание ссылок?

Я использую макет силы для представления направленной невзвешенной сети. Мое вдохновение исходит из следующего примера: http://bl.ocks.org/mbostock/1153292

enter image description here

Моя проблема в том, что в моем случае гораздо больше связей между узлами, и у меня возникает ощущение, что предоставление фиксированного linkDistance, которое всегда одно и то же, является очень большим ограничением для моего макета.

Можно ли установить динамический linkDistance, чтобы ссылка увеличивалась по длине, если полезно уменьшить пересечение ссылок внутри графика?

4b9b3361

Ответ 1

Из документация:

force.linkDistance([расстояние])

Если задано расстояние, задается расстояние между привязанными узлами до указанного значения. Если расстояние не указано, возвращает расстояние текущей линии макета, которое по умолчанию равно 20. Если расстояние постоянное, все ссылки имеют одинаковое расстояние. В противном случае, если расстояние - это функция, то функция оценивается для каждой ссылки (по порядку), передавая ссылку и ее индекс, причем этот контекст является макетом силы; значение возвращаемой функции затем используется для установки каждого расстояния между линиями. Функция оценивается всякий раз, когда начинается макет. Как правило, расстояние указывается в пикселях; однако единицы произвольны относительно размера макета.

Обратите внимание, что расстояние ссылки по-прежнему регулируется по мере выполнения макета. Вы также можете найти значение linkStrength() полезным.

Ответ 2

Всего два шага:

Шаг 1: добавьте параметр в главный json следующим образом:

{источник: "Microsoft", цель: "Amazon", тип: "licensing", значение: 60}, {источник: "Microsoft", цель: "HTC", введите: "licensing", значение: 60}, {источник: "Samsung", цель: "Apple", введите: "костюм", значение: 60},

Шаг 2: обновите ссылку на метод приема.

.linkDistance(function(d) { return  d.value; })