D3JS wrap text plugin overwritten after updating the data

Question

I've been using the solution from the accepted answer here to wrap text on a tree diagram: Wrapping Text in D3

Nevertheless, when I update the data, as in:

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

the wrapping effect dissapears.

What am I doing wrong?

Edit to show more of the code

Every node is added with the usual D3JS procedure (enter, update, exit). The problem is that wrapping the updated text does not work.

So we enter the nodes on:

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

We append elements to the node, like the text of interest:

nodeEnter 
  .append("text")
  .attr("x", 5)
  .attr("dy", ".95em")
  .attr("class", "nodeText")
  .attr("text-anchor", "start")
  .text(function(d) {
    return d.name;
  })
  .call(wrap, 150);

Wrapping works fine if we do not Update these nodes. But upon updates like this below:

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

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

The text does not fit into the wrap anymore. The wrap function is from the stackoverflow cited above, check the link.

Can you add enough code to run a demo of the problem so others can reproduce (and fix) the issue? — i alarmed alien, Oct 15 '18 at 13:34
@ialarmedalien I just updated the question... with the basic snippets of code. Hope it helps! — P. Navarro, Oct 15 '18 at 14:27

score 1 · Accepted Answer · answered Oct 16 '18 at 06:56

I've just come across the same issue elsewhere. It is because the text wrap function cannot act on a transition, it requires a selection. To fix your code, just move the text addition and wrap calls to prior to the transition:

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)

D3JS wrap text plugin overwritten after updating the data

____Edit to show more of the code____

1 Answers1

Edit to show more of the code