Является ли D3 Force Layout лучшим вариантом для этого графика? - PullRequest
Новая
       35

Является ли D3 Force Layout лучшим вариантом для этого графика?

0 голосов
/ 22 июня 2019

Я хотел бы создать график D3, подобный изображению в этом посте.

Force Layout кажется лучшим вариантом, но мои узлы должны иметь разные расстояния, и каждый узел должен иметь разныеsize.

Итак, я должен настаивать на Force Layout?

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

График, который я хочу сделать (это мой первый вопрос, поэтому у меня нет репутации, чтобы поместить изображение непосредственно в этот пост):

https://i.ibb.co/Tk0hHkv/toaskd3.png

1 Ответ

0 голосов
/ 27 июня 2019

Разные расстояния и разные радиусы могут быть достигнуты в d3js.

Вы можете добавить свойство radius для каждого узла, т. Е. Ваши узлы должны выглядеть примерно так: {r:5, id:1, ...}. Затем, когда пришло время создать соответствующие svg элементы, вы можете сделать что-то вроде 

var circles = svg.append("g").selectAll("circle").data(nodes);
circles.enter().append("circle").attr("r", function(d) { return d.r; });

Аналогично, вы можете добавить свойство dist к каждой из ваших ссылок. Затем добавьте силу ссылки к вашей симуляции следующим образом: 

var sim = d3.forceSimulation(nodes)
  .force("link", d3.forceLink(links)
              .distance(function(l){
                return l.dist;
              })
              .strength(1)
  );

В качестве рабочего примера вы можете проверить этот кодекс, который я только что создал. Вы всегда можете проверить официальную ссылку API для получения подробной информации.

По моему мнению, расклад сил D3 является очень гибким вариантом для изображения графиков.

...