更新数据后，D3JS自动换行文本插件被覆盖

Question

我一直在使用此处接受的答案中的解决方案来在树形图上包裹文字：Wrapping Text in D3

不过，当我更新数据时，如下所示：

name

包装效果消失。

我在做什么错了？

____编辑以显示更多代码____

每个节点都添加了通常的D3JS过程（输入，更新，退出）。问题在于包裹更新后的文本不起作用。

因此，我们输入节点：

extension Foo {
   func someJob() {
      if self is Bar {
          ((Bar) self).name = "John"
       }
   }
}

我们将元素添加到节点，例如感兴趣的文本：

nodeUpdate
  .selectAll("text.nodeText")
  .text(function(d) {
    return d.name;
  })
  .call(wrap, 100)
  .style("fill-opacity", 1);

如果不更新这些节点，则包装效果很好。但是更新如下：

var nodeEnter = node
  .enter()
  .append("g")
  .call(dragListener)
  .attr("class", "node")
  .attr("transform", function(d) {
    return "translate(" + source.y0 + "," + source.x0 + ")";
  })
  .on("click", click);

文本不再适合自动换行。 包装功能来自上面引用的stackoverflow，请检查链接。

Answer 1

我在其他地方也遇到过同样的问题。这是因为文本换行功能无法作用于过渡，因此需要进行选择。要修复您的代码，只需在过渡之前将附加的文本和wrap调用移至

node
  .selectAll("text.nodeText")
  .text(function(d) {
    return d.name;
  })
  .call(wrap, 130);

var nodeUpdate = node
  .transition()
  .duration(duration)
  .attr("transform", function(d) {
    return "translate(" + d.y + "," + d.x + ")";
  });

nodeUpdate
  .selectAll("text.nodeText")
  .style("fill-opacity", 1)