Как исправить положение узлов на заданном уровне c в макете дерева D3? - PullRequest
Новая
       36

Как исправить положение узлов на заданном уровне c в макете дерева D3?

0 голосов
/ 27 марта 2020

У меня есть макет дерева из 6 отдельных деревьев. Поскольку корни этих деревьев связаны между собой, я построил радиальное дерево, собрав вместе все деревья, где root этого большого дерева скрыто с его связями. Для связи между 6 корнями я добавил дополнительные ссылки, добавив путь к графику. Проблема в том, что когда один из этих 6 корней свернут, узлы меняют свое положение. Поскольку ссылки, которые я добавил позже, являются stati c, мне нужно, чтобы корни были исправлены в отличие от других узлов.

В моей функции обновления у меня есть следующий фрагмент для преобразования местоположений узлов: 

// Transition nodes to their new position.
            var nodeUpdate = node.transition()
                .duration(duration)
                .attr("transform", function(d) {
                    return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")";
                })

Функция, которую я использовал для добавления дополнительных ссылок: 

function drawRootLinks() {
            // Filter 6 root nodes
            var rootNodes = tree.nodes(root).filter(function(d) {
                return d['type'] === 'rootNode';
            });

            rootLinks = [{
                    parent: rootNodes[0],
                    child: rootNodes[1]
                },
                {
                    parent: rootNodes[0],
                    child: rootNodes[2]
                },
                {
                    parent: rootNodes[0],
                    child: rootNodes[5]
                },
                {
                    parent: rootNodes[4],
                    child: rootNodes[2]
                },
                {
                    parent: rootNodes[4],
                    child: rootNodes[3]
                },
                {
                    parent: rootNodes[2],
                    child: rootNodes[1]
                },
                {
                    parent: rootNodes[2],
                    child: rootNodes[3]
                },
                {
                    parent: rootNodes[5],
                    child: rootNodes[1]
                },
                {
                    parent: rootNodes[5],
                    child: rootNodes[2]
                },
                {
                    parent: rootNodes[5],
                    child: rootNodes[4]
                },
                {
                    parent: rootNodes[5],
                    child: rootNodes[3]
                }
            ];

            rootLinks.forEach(function(multiPair) {
                svg.append("path")
                    .attr("class", "rootLink")
                    .attr("d", function() {
                        var oTarget = {
                            x: multiPair.parent.x0,
                            y: multiPair.parent.y0
                        };
                        var oSource = {
                            x: multiPair.child.x0,
                            y: multiPair.child.y0
                        };

                        return diagonal({
                            source: oSource,
                            target: oTarget
                        });
                    });
            });
        }

Итак, как мне добиться создания этих корней (обратите внимание, что они являются узлами уровня 1 на моем графике как root скрыто) исправлено, а другие нет? Заранее спасибо.

...