Группировка / кластеризация ребер графа одного цвета в D3 - PullRequest
Новая
       8

Группировка / кластеризация ребер графа одного цвета в D3

0 голосов
/ 15 апреля 2020

У меня есть орграф в D3 v4, где края одного и того же номера «группы» (назначены в ассоциированном JSON) отображаются одинаковым цветом. Я пытаюсь заставить края с тем же цветом казаться смежными друг с другом, когда график загружен.

Я пытался изменить силы связи D3, но я не уверен, являются ли они правильными параметрами для настройки для этой задачи (возможно ли иметь ребра с положительным сходством для определенной группы, но отрицательным для остальных ?). Я также рассмотрел примеры, где узлы были сгруппированы (например, здесь и здесь ), но я не знаю, могут ли параметры, примененные к узлам, быть применены к ребрам. У меня было много проблем с поиском подходов к проблеме, с которой я столкнулся.

Я объявляю свое ForceSimulation следующим образом: 

        let force = d3.forceSimulation(graph.nodes)
                      .force("charge", d3.forceManyBody())
                      .force("link", d3.forceLink(graph.edges))
                      .force("center", d3.forceCenter().x(w/2).y(h/2));

Вот JSFiddle с полным графиком.

1 Ответ

0 голосов
/ 16 апреля 2020

forceLink.strength может использоваться для указания силы связи в соответствии с данными.

Может быть создана переменная для сохранения желаемой силы связи по группам, а затем используется в функции .strength, как показано ниже. 

let strengthByGroup = [.5, 1, .1]

.force("link", d3.forceLink(graph.edges)
            .strength(function(d) {
              return strengthByGroup[d.group]
            })
)

Демонстрация в обновленном jsfiddle .

Для более точного контроля физического местоположения ссылок, forceLink.distance может использоваться как альтернатива.

...