D3 TypeError: link.exit is not a function link.exit().remove(); What am I doing wrong?

Question

I'm making a D3 tree layout. I've looked all over and it seems like this error shows up when you don't have data tied to the DOM and you try to remove it. I've ensured not only that there is data there, but I've also made sure the data changes by doing a count on the links array before and after I modify it.

Here is the problem code from my update function.

    link = linkElements.selectAll("path.link") //link elements is dom object that holds my links
    .data(links).enter().append("path")
    .attr("class", "link")
    .attr("d", diagonal);

    link.exit().remove();

It's practically the same as many examples, but I keep seeing this:

TypeError: link.exit is not a function

link.exit().remove();

What is going on? I do something similar with the nodes. I can't get anything to delete from the tree.

Answer 1

Notice what link is getting assigned to:

link = linkElements.selectAll("path.link")
  .data(links)
.enter() // <----- THIS
  .append("path")
  .attr("class", "link")
  .attr("d", diagonal);

So link is a selection containing newly appended nodes resulting from the enter() sub-selection, so it doesn't have an exit() sub-selection by definition.

What you need (and probably meant) to do is assign link to the entire data-bound selection, and then work on the sub-selections:

link = linkElements.selectAll("path.link")
  .data(links);// link assigned
link.enter() // <----- THIS
  .append("path")
  .attr("class", "link")
  .attr("d", diagonal);
link.exit().remove(); // no more errors!