score:10

Accepted answer

Here's an updated fiddle with three changes: http://jsfiddle.net/URpfB/

1) your initial selectAll selector needs to be more specific as there are many descendant divs in the page after your code runs once. You need to distinguish between the top-most member divs and others by doing selectAll('div.member')

2) you need a data key function so d3 has more to go on than data length/position in order to determine when new data is added or old data is removed. In your example, this would keep each div.member associated with a single member name: data(bandMates, function(d){return d.name;})

3) as Snoozer pointed out, you need to be more precise when assigning selections to variables. You cannot exit() from enter() selections.

score:1

Tree-only possible cause...

This is not related to the OP's issue, but I found this SO question while researching it so adding it for the next passerby.

In my case the cleanup of a d3.layout.tree on collapse/expand was not happening because I was forgetting to set the "node" class on the nodes. It would seem as if d3 trees require the node class attribute to be set.

did not work

<g transform="translate(20,20)">
    <circle style="fill: rgb(198, 219, 239);" r="8"></circle>
    <text style="fill-opacity: 1;" dx="15" dy="4" id="txt_SELF_SERVICE" class="text">Self Service</text>
</g>

worked

<g transform="translate(20,20)" class="node ">
    <circle style="fill: rgb(198, 219, 239);" r="8"></circle>
    <text style="fill-opacity: 1;" dx="15" dy="4" id="txt_SELF_SERVICE" class="text">Self Service</text>
</g>

score:12

You've defined content as:

var content = d3.select("#graph").selectAll("div")
    .data(bandMates)
    .enter()
    .append("div")
    .classed("member",true) //Div contenedor

So when you do content.exit(), it's like trying to do d3.select("#graph").selectAll("div").data(bandMates).enter()..exit()

You're calling exit on a selection you've already entered. If you define content instead as:

var content = d3.select("#graph").selectAll("div")
    .data(bandMates);

and then do content.enter().... in the 3rd line of code you shared in your answer, this error should go away.

Enter() and exit() are functions of a selection of data, so once you've called enter() you cannot later call exit() and have it be meaningful. exit() must be on the same data.


Related Query