LaVOZs

The World’s Largest Online Community for Developers

'; javascript - How to label path in D3 tree layout? - LavOzs.Com

I have a radial tree where its root is hidden with its links. So, my graph shows 6 separate trees. I added some links between the roots of these trees by adding path. However, I could not manage to add text in the middle of these new links.

I am using the following function to draw paths and add labels to the paths. But, the part that adds labels adds labels to different places.

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);
            });
        }

So, how can I solve this? Thanks in advance.

Related
How do JavaScript closures work?
How do I check if an element is hidden in jQuery?
How do I remove a property from a JavaScript object?
How do I redirect to another webpage?
How do I check whether a checkbox is checked in jQuery?
How do I include a JavaScript file in another JavaScript file?
How to replace all occurrences of a string?
How to check whether a string contains a substring in JavaScript?
How can I remove a specific item from an array?
How do I return the response from an asynchronous call?