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

Question

[silentvick]

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

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

Пример на JSFiddle

Answer 1

[silentvick]

Остановился пока на следующем решении. Вычисляю необходимую высоту дерева по формуле:

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

Где

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

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

Пример на JSFiddle