D3.js: How to change the position of a text in one single node

Question

I need to change the position of a text in the root node to be visible. I have a D3 structure and I would like to be able to point one single root node and change the text position. My root node text is not visible and I would like to put it underneath and showed.

I'm showing here a screenshot of my issue:

Answer 1

Replace

var svg = d3.select(d3Div).append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(40,0)");

with

var svg = d3.select(d3Div).append("svg")
    .attr("preserveAspectRatio","none")
    .attr("viewBox","-50 -50 "+(width+50)+" "+(height+50))
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(40,0)");

Another mundane solution, As far as I remember tree returns a hierarchical data, where d.parent is null for the root. So if you have a place where you are setting the dy:

nodeEnter.append("text")
      .attr("x", function(d) { return d.children || d._children ? -10 : 10; })
      .attr("dy", ".35em")
      .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
      .text(function(d) { return d.name; })
      .style("fill-opacity", 1e-6);

replace the dy part with:

...
.attr("dy",function(d){!d.parent ? this.parentNode.getBBox().height : ".35em"})
.attr("dx",function(d){!d.parent ? this.parentNode.getBBox().width: ".35em"})
...

You specifically want to do this in the enter phase, after setting the text.A working fiddle:

https://jsfiddle.net/ibowankenobi/7770988e/3/

in your case, there is no node update, so your best bet is to add the above 2 lines AFTER setting the text, so the the bbox will return the correct dimensions:

 node.append("text")
    //.attr("dy", 3)
    //.attr("fill", function(d) { return d3TextColour(d); })
    .style("fill", function (d) {
      return d3TextColour(d);
    })
    .attr("text-anchor", function (d) {
      return d.children ? "end" : "start";
    })
    .text(function (d) {
      if (d.name.length > 15) {
        return d.name.substring(0, 12) + "..."
      } else {
        return d.name;
      }
    })
    .attr("dy",function(d){console.log(d.name === "root"); return d.name === "root" ? this.parentNode.getBBox().height : 3})
    .attr("dx",function(d){console.log(d.name === "root"); return d.name === "root" ? this.parentNode.getBBox().width : (d.children ? -8 : 8)});