使用D3.js创建嵌套的HTML结构

Question

I have an object that looks something like this:

data = {
  questions: [ 
               value: "Question 1", answers: [ {value:"answer1"}, {value:"answer2"} ],
               value: "Question 2", answers: [ {value:"answer1"}, {value:"answer2"} ]
             ]
}

(This is simplified - answers have a count that will be displayed using bar graphs. I think I know how to do that once I get there, however.)

The issue I'm having is dynamically (because the data changes frequently) creating the HTML structure, which should look something like this:

<div class="question">
  Question 1  
  <div class="answer">Answer 1</div>
  <div class="answer">Answer 2</div>
</div>
<div class="question">
  Question 2  
  <div class="answer">Answer 1</div>
  <div class="answer">Answer 2</div>
</div>

I can get D3 to create the question divs (the ones w/ class="question" ), and put in the text for that (ie "Question 1", etc.) but I can't figure out how to get D3 to create a child div for the answers (ie the ones w/ class="answer" ).

Here's what I have right now:

var questions_chart = d3.select('#survey-questions')
    .selectAll("div")
    .data(data.questions);

questions_chart.transition()
    .text(function(d) { return d.value; });

questions_chart.enter().append("div")
    .text(function(d) { return d.value; })
    .attr("class", "question rounded")

questions_chart.exit().remove();

Basically, how can I nest D3 appends in such a way that I can nest divs for each answer within the div for that question?

Answer 1

As Lars indicated, you want to use nested selections for this:

var data = {
  questions: [ 
    {value: "Question 1", answers: [ {value:"answer1"}, {value:"answer2"} ]},
    {value: "Question 2", answers: [ {value:"answer1"}, {value:"answer2"} ]}
  ]
};

d3.select("body").selectAll("div")
  .data(data.questions)
  .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; });

Note: I had to fix your data a little, making data.questions an array of objects.

Answer 2

This extends the answer Peter gave to add the "class" information you requested in your original question, as well as answer your follow-up question in the comment:

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

divQ
    .enter()
    .append("div") // this creates the question divs
    .attr("class","question")
    .text(function(d) { return d.value; });

divQ
    .exit()
    .remove();


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

divA
    .exit()
    .remove();

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