CODEWITHSUNDEEP
d3.js
Catalin
Catalin

Reputation: 122

Adding a label to a path with D3

I am building a graph with D3 and represent the links between nodes as paths. I want to add a label for each path by using the following code:

path_labels = path_labels.data(links);
path_labels.enter().append("text")
                    .attr("class", "linklabel")
                    .style("font-size", "12px")
                    .attr("text-anchor", "start")
                    .append("textPath")
                    .attr("xlink:href", function (d) {
                        return "#linkId_0";
                    })
                    .text(function (d) {
                        return "my text"; 
                    });

When I look at the result, text is appended, but not the textPath inside the text element.

Can someone help?

The full code can be found at http://jsfiddle.net/3u0oage7/

Upvotes: 1

Views: 2098

Answers (1)

Catalin
Catalin

Reputation: 122

I found the answer to the problem. The code I posted works as supposed. The problem was that in my code I had this:

svg.selectAll('text').
                    text(function (d) {
                        return d.label;
                    });

This code was changing all the text elements. I changed the selector so it selects only the text elements corresponding to a circle.

Upvotes: 1

Related Questions