Как обозначить путь в макете дерева D3? - PullRequest
Новая
       35

Как обозначить путь в макете дерева D3?

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

У меня есть радиальное дерево, где его root скрыто с его ссылками. Итак, мой график показывает 6 отдельных деревьев. Я добавил несколько ссылок между корнями этих деревьев, добавив путь. Однако мне не удалось добавить текст в середине этих новых ссылок.

Я использую следующую функцию для рисования контуров и добавления меток к контурам. Но часть, которая добавляет метки, добавляет метки в разные места. 

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

            rootLinks = [{
                    parent: rootNodes[0],
                    child: rootNodes[1],
                    label: "exists in/at/within/on/..."
                },
                {
                    parent: rootNodes[0],
                    child: rootNodes[2],
                    label: "is generated via"
                },
                {
                    parent: rootNodes[0],
                    child: rootNodes[5],
                    label: "is produced/read/checked/... by/for/..."
                },
                {
                    parent: rootNodes[4],
                    child: rootNodes[2],
                    label: "understands/tries to defeat/..."
                },
                {
                    parent: rootNodes[4],
                    child: rootNodes[3],
                    label: "uses"
                },
                {
                    parent: rootNodes[2],
                    child: rootNodes[1],
                    label: "is used in/at/within/on/..."
                },
                {
                    parent: rootNodes[2],
                    child: rootNodes[3],
                    label: "uses"
                },
                {
                    parent: rootNodes[5],
                    child: rootNodes[1],
                    label: "lives in"
                },
                {
                    parent: rootNodes[5],
                    child: rootNodes[2],
                    label: "uses/is influenced by/..."
                },
                {
                    parent: rootNodes[5],
                    child: rootNodes[4],
                    label: "uses/benefits from/..."
                },
                {
                    parent: rootNodes[5],
                    child: rootNodes[3],
                    label: "uses"
                }
            ];

            rootLinks.forEach(function(multiPair) { // This part is for adding arrows to links
                svg.append("svg:defs").selectAll("marker")
                    .data(["end"]) // Different link/path types can be defined here
                    .enter().append("svg:marker") // This section adds in the arrows
                    .attr("id", String)
                    .attr("viewBox", "0 -5 10 10")
                    .attr("refX", 15)
                    .attr("refY", -1.5)
                    .attr("markerWidth", 6)
                    .attr("markerHeight", 6)
                    .attr("orient", "auto")
                    .append("svg:path")
                    .attr("d", "M0,-5L10,0L0,5");

                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
                        });
                    })
                    .attr("marker-end", "url(#end)");

                svg.append("text") //This part is not working...
                    .attr("transform", function() {
                        return "translate(" +
                            ((multiPair.parent.y0 + multiPair.child.y0) / 2) + "," +
                            ((multiPair.parent.x0 + multiPair.child.x0) / 2) + ")";
                    })
                    .attr("dy", ".35em")
                    .attr("text-anchor", "middle")
                    .text(multiPair.label);
            });
        }

Итак, как я могу решить эту проблему? Заранее спасибо.

...