D3 дерево вертикальное разделение
Я использую макет дерева D3, такой как этот:http://mbostock.github.com/d3/talk/20111018/tree.html
Я изменил его для своих нужд и столкнулся с проблемой. Пример также имеет ту же проблему: если у вас открыто слишком много узлов, они становятся компактными и затрудняют чтение и взаимодействие. Я хочу определить минимальное вертикальное пространство между узлами во время изменения размера стадии, чтобы учесть такой интервал.
Я попытался изменить алгоритм разделения, чтобы он работал:
.separation(function (a, b) {
return (a.parent == b.parent ? 1 : 2) / a.depth;
})
Это не сработало. Я также попытался вычислить, на какой глубине больше всего детей, а затем указать высоту сцены, которая будетchildren * spaceBetweenNodes
, Это приблизило меня, но все еще не было точным.
depthCounts = [];
nodes.forEach(function(d, i) {
d.y = d.depth * 180;
if(!depthCounts[d.depth])
depthCounts[d.depth] = 0;
if(d.children)
{
depthCounts[d.depth] += d.children.length;
}
});
tree_resize(largest_depth(depthCounts) * spaceBetweenNodes);
Я также пытался изменить узелx
значение тоже в методе ниже, где он рассчитываетy
расставание, но без сигары. Я бы тоже опубликовал это изменение, но я удалил его из своего кода.
nodes.forEach(function(d, i) {
d.y = d.depth * 180;
});
Если вы можете предложить способ или знаете способ, которым я могу достичь минимального расстояния по вертикали между узлами, пожалуйста, напишите. Буду очень благодарен. Я, наверное, упускаю что-то очень простое.