D3.js：如何在一个节点中更改文本的位置

Question

我需要更改根节点中文本的位置才能看到。 我有一个D3结构，我希望能够指向一个单根节点并更改文本位置。我的根节点文本不可见，我想把它放在下面并显示。

我在这里显示我的问题的截图：

Answer 1

替换

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

与

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

另一个平凡的解决方案，据我记得，树返回一个分层数据，其中d.parent为根为空。所以如果你有一个设置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);

用以下代码替换dy部分：

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

您特别想在设置文本后在输入阶段执行此操作。工作小提琴：

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

在你的情况下，没有节点更新，所以你最好的选择是在设置文本后添加上面两行，这样bbox将返回正确的尺寸：

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