insert text in the links of the tree in d3

Question

 var treeData = [ { "name": "glucose_tol", "directions": ">", "thresholds": "126", "exits": 0.0, "children": [ { "name": "age", "directions": ">", "thresholds": "29", "exits": 1.0, "children": [ { "name": true }, { "name": "mass_index", "directions": ">", "thresholds": "29.7", "exits": 0.5, "children": [ { "name": true }, { "name": false } ] } ] }, { "name": false } ] }, ]; // ************** Generate the tree diagram ***************** var margin = {top: 20, right: 120, bottom: 20, left: 120}, width = 960 - margin.right - margin.left, height = 500 - margin.top - margin.bottom; var i = 0; var tree = d3.layout.tree() .size([height, width]); var diagonal = d3.svg.diagonal() .projection(function(d) { return [dx, dy]; }); var svg = d3.select("body").append("svg") .attr("width", width + margin.right + margin.left) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); root = treeData[0]; update(root); function update(source) { // Compute the new tree layout. var nodes = tree.nodes(root).reverse(), links = tree.links(nodes); // Normalize for fixed-depth. nodes.forEach(function(d) { dy = d.depth * 120; }); // Declare the nodes… var node = svg.selectAll("g.node") .data(nodes, function(d) { return d.id || (d.id = ++i); }); // Enter the nodes. var nodeEnter = node.enter().append("g") .attr("class", "node") .attr("transform", function(d) { return "translate(" + dx + "," + dy + ")"; }); nodeEnter.append("circle") .attr("r", 10) .style("fill", "#fff"); nodeEnter.append("text") .attr("x", function(d) { return d.children || d._children ? -13 : 13; }) .attr("dy", ".35em") .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; }) .text(function(d) { return d.name; }) .style("fill-opacity", 1); // Declare the links… var link = svg.selectAll("path.link") .data(links, function(d) { return d.target.id; }); // Enter the links. link.enter().insert("path", "g") .attr("class", "link") .attr("d", diagonal); // Add threshold and directions link.enter().insert("text") .attr("font-family", "Arial, Helvetica, sans-serif") .attr("fill", "Black") .style("font", "normal 12px Arial") .attr("transform", function(d) { return "translate(" + ((d.source.x + d.target.x)/2) + "," + ((d.source.y + d.target.y)/2) + ")"; }) .attr("dy", ".35em") .attr("text-anchor", "middle") .text(function(d) { //check whether thresholds is not undefined && that target.thresholds is not undefined as it will print on both sides if (d.source.thresholds !== undefined) if(d.target.thresholds !== undefined) return d.source.thresholds + ' ' + d.source.directions; }) }

 .node circle { fill: #fff; stroke: steelblue; stroke-width: 3px; } .node text { font: 12px sans-serif; } .link { fill: none; stroke: #ccc; stroke-width: 2px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>

I am having a problem adding text in middle of the links to a tree, because the last level of the tree doesn't give me any text. This is the code I have to add the text in the links:

   // Add threshold and directions
link.enter().insert("text")
    .attr("font-family", "Arial, Helvetica, sans-serif")
    .attr("fill", "Black")
    .style("font", "normal 12px Arial")
    .attr("transform", function(d) {
        return "translate(" +
            ((d.source.x + d.target.x)/2) + "," +
            ((d.source.y + d.target.y)/2) + ")";
    })
    .attr("dy", ".35em")
    .attr("text-anchor", "middle")
    .text(function(d) {
        //check whether thresholds is not undefined && that target.thresholds is not undefined as it will print on both sides
        if (d.source.thresholds !== undefined)
            if(d.target.thresholds !== undefined)
        return d.source.thresholds + ' ' + d.source.directions;
    })

if I comment these two lines : if (d.source.thresholds !== undefined) and if(d.target.thresholds !== undefined) then I get the text on all the links but on both sides, which I don't want. How do I get the text only on one side but also on the last level.

Answer 1

First of all you need to have a way to find out whether the current node is on the last level, or if there are more levels under it. For this we will implement a maxDepth variable that will store a maximum value of depth attribute for all nodes. This is done in the update(root) function:

  // Normalize for fixed-depth.
  var maxDepth = 0;
  nodes.forEach(function(d) { d.y = d.depth * 120; maxDepth = (d.depth>maxDepth)?d.depth:maxDepth;});

Next we add two additional checks to the second if statement like this:

if(d.target.thresholds !== undefined || d.target.name === true && d.target.depth == maxDepth)

It will make sure the text is added to true node only on the last level.

 var treeData = [ { "name": "glucose_tol", "directions": ">", "thresholds": "126", "exits": 0.0, "children": [ { "name": "age", "directions": ">", "thresholds": "29", "exits": 1.0, "children": [ { "name": true }, { "name": "mass_index", "directions": ">", "thresholds": "29.7", "exits": 0.5, "children": [ { "name": true }, { "name": false } ] } ] }, { "name": false } ] }, ]; // ************** Generate the tree diagram ***************** var margin = {top: 20, right: 120, bottom: 20, left: 120}, width = 960 - margin.right - margin.left, height = 500 - margin.top - margin.bottom; var i = 0; var tree = d3.layout.tree() .size([height, width]); var diagonal = d3.svg.diagonal() .projection(function(d) { return [dx, dy]; }); var svg = d3.select("body").append("svg") .attr("width", width + margin.right + margin.left) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); root = treeData[0]; update(root); function update(source) { // Compute the new tree layout. var nodes = tree.nodes(root).reverse(), links = tree.links(nodes); // Normalize for fixed-depth. var maxDepth = 0; nodes.forEach(function(d) { dy = d.depth * 120; maxDepth = (d.depth>maxDepth)?d.depth:maxDepth;}); // Declare the nodes. var node = svg.selectAll("g.node") .data(nodes, function(d) { return d.id || (d.id = ++i); }); // Enter the nodes. var nodeEnter = node.enter().append("g") .attr("class", "node") .attr("transform", function(d) { return "translate(" + dx + "," + dy + ")"; }); nodeEnter.append("circle") .attr("r", 10) .style("fill", "#fff"); nodeEnter.append("text") .attr("x", function(d) { return d.children || d._children ? -13 : 13; }) .attr("dy", ".35em") .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; }) .text(function(d) { return d.name; }) .style("fill-opacity", 1); // Declare the links… var link = svg.selectAll("path.link") .data(links, function(d) { return d.target.id; }); // Enter the links. link.enter().insert("path", "g") .attr("class", "link") .attr("d", diagonal); // Add threshold and directions link.enter().insert("text") .attr("font-family", "Arial, Helvetica, sans-serif") .attr("fill", "Black") .style("font", "normal 12px Arial") .attr("transform", function(d) { return "translate(" + ((d.source.x + d.target.x)/2) + "," + ((d.source.y + d.target.y)/2) + ")"; }) .attr("dy", ".35em") .attr("text-anchor", "middle") .text(function(d) { //check whether thresholds is not undefined && that target.thresholds is not undefined as it will print on both sides if (d.source.thresholds !== undefined) if(d.target.thresholds !== undefined || d.target.name === true && d.target.depth == maxDepth) return d.source.thresholds + ' ' + d.source.directions; }) }

 .node circle { fill: #fff; stroke: steelblue; stroke-width: 3px; } .node text { font: 12px sans-serif; } .link { fill: none; stroke: #ccc; stroke-width: 2px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>