CODEWITHSUNDEEP
d3.js
Samiksha Sardal
Samiksha Sardal

Reputation: 79

Unable to add text on link in d3 collapsible tree

in the above code my .append("text") dosent work.I do not get any text inserted on my links. i tried using link.append("path")..using this i can see the text but not the links. I want to use link.insert("path") and still be able to add text and be able to collapse and expand nodes along with the link text. Pls help

var link = svg.selectAll("path.link")
                         .data(links, function (d) { return d.target.id; });

// Enter any new links at the parent's previous position.
//  var link1=link.enter();
link.enter().insert("path", "g")
    .attr("class", "link")
    .attr("d", function (d) {
        var o = { x: source.x0, y: source.y0 };
        return diagonal({ source: o, target: o });
    });  

link.enter()
    .append("g")
    .attr("class", "link")
    .append("text")
    .attr("font-family", "Arial, Helvetica, sans-serif")
    .attr("fill", "Black")
    .style("font", "normal 12px Arial")
    .attr("transform", function(d) {
        return "translate(" +
        ((d.source.y + d.target.y)/2) + "," + 
        ((d.source.x + d.target.x)/2) + ")";
    })   
    .attr("dy", ".35em")
    .attr("text-anchor", "middle")
    .text(function(d) {
        console.log(d.target.name);
        return d.target.name;
    });

Upvotes: 1

Views: 1962

Answers (1)

Henry S
Henry S

Reputation: 3112

This was difficult to answer without a fiddle or a link to working code, but I think this is maybe what you were after: http://jsfiddle.net/henbox/82pepd2a/9/

You should see red text on the links that corresponds to the node text (in black) and these should transition as nodes \ links move.

I created a new variable var linktext to handle the text separate from the links (path elements) themselves, since this was what was causing you paths not to show.

I also used insert("g") instead of append("g") to add a completely new g element, rather than placing the g and text inside each path. Here's the important stuff:

// Update the link text
var linktext = svg.selectAll("g.link")
    .data(links, function (d) {
    return d.target.id;
});                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       

linktext.enter()
    .insert("g")
    .attr("class", "link")
    .append("text")
    .attr("dy", ".35em")
    .attr("text-anchor", "middle")
    .text(function (d) {
    //console.log(d.target.name);
    return d.target.name;
});

Finally I added 'update' and 'remove' blocks for linktext using a similar approach used for links. Note that I also moved the styling to CSS for tidyness

Upvotes: 5

Related Questions