silentvick
@silentvick

D3.js: как сделать разрядку элементов дерева, чтобы они не налезали друг на друга?

Строю дерево, идущее слева-направо, с помощью библиотеки d3. Проблема в том, что при большом количестве нод, они начинают налезать друг на друга, потому что библиотека старается втиснуть все дерево в указанные через параметр size() размеры.

Мне бы хотелось, чтобы оно отрисовывалось в "натуральную величину" (как если бы полотно было по размерам больше размера отрисованного графа), даже если часть дерева уйдет за границу видимой области.

Пример на JSFiddle
  • Вопрос задан
  • 3107 просмотров
Решения вопроса 1
silentvick
@silentvick Автор вопроса
Остановился пока на следующем решении. Вычисляю необходимую высоту дерева по формуле:

height = leafsNumber * (nodeHeight + nodeHeight/2) + margin.top + margin.bottom

Где
  • leafsNumber – количество «листьев» дерева (элементов, не имеющих потомков)
  • nodeHeight – высота отрисованного элемента
  • nodeHeight/2 – немного «воздуха» между «листьями»
  • margin.top, margin.bottom – отсупы дерева от контейнера сверху и снизу соответственно
Формула дает грубый результат, так как не учитывает положения родительских элементов. При этом она сработает только если все элементы будут иметь фиксированную высоту.

Пример на JSFiddle
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы