enter() and exit() with D3 nested selections

Question

I have a follow-up question to this question that I closed too hastily.

How/where would I put a .exit() or .transition() for the answers? In my original code, I'm saving the main chart in a variable ( questions_chart ), so I can say something like questions_chart.exit().remove() . However, if I put .exit().remove() after the .text() (last line in the code in Peter's answer), I get an error saying that object array has no method 'exit'

Answer 1

I have not tested this but will give it a shot...you would need to preserve the variable binding the data...like so:

var divs = d3.select("body").selectAll("div")
    .data(data.questions);

divs
    .enter().append("div") // this creates the question divs
    .text(function(d) { return d.value; })
    .selectAll("div")
    .data(function(d) { return d.answers; })
    .enter().append("div") // this creates the nested answer divs
    .text(function(d) { return d.value; });

divs.exit().remove();

I am assuming you don't need to remove just the divs that are answers. Hope this helps.

UPDATE: giving it a shot at dealing with questions and answers...

var divs = d3.select("body").selectAll("div")
    .data(data.questions);

var questionDivs = divs
    .enter().append("div") // this creates the question divs
    .text(function(d) { return d.value; });

divs.exit().remove();

var answerDivs = questionDivs
    .selectAll("div")
    .data(function(d) { return d.answers; });

answerDivs
    .enter().append("div") // this creates the nested answer divs
    .text(function(d) { return d.value; });

answerDivs.exit().remove();