D3 un-nested selection - d3.js

Question

I want to convert this:
var data = [['apples','red'], ["oranges", "orange"], ["bananas", "yellow"]];
Into:
<div>
<div>apples</div><div>red</div>
</div>
<div>
<div>oranges</div><div>orange</div>
</div>
<div>
<div>bananas</div><div>yellow</div>
</div>
I know this must be easy, but every solution ends up being nested:
<div>Apples<div>red</div></div>
I am familiar with the table or list drawing solution but in the real problem the first div has text and the second div contains a chart so that is not going to work.
This was my latest attempt to un-nest:
var div3 = anchor.selectAll("#mydiv")
.data(data);
div3
.enter().append("div")
.attr("class","one")
.text(function(d) { return d[0];})
div3.selectAll("#mydiv .one")
.data(function(d) {
return [d[1]]; })
.enter().append("div")
.attr("class","two")
.text(function(d) {
return d;})
What is the correct way to do this?

Answer 1

The standard way of doing it is the following:
var data = [['apples','red'], ["oranges", "orange"], ["bananas", "yellow"]];
d3.select("body").selectAll("div.outer")
.data(data) // data is array with length 3
.enter().append("div") // will append 3 divs
.attr("class", "outer")
.selectAll("div.inner")
.data(function(d) { return d; })
.enter().append("div")
.attr("class", "inner")
.text(function(d) { return d; });​
See working fiddle: http://jsfiddle.net/YaAkv/
There are quite a few problems with the code you tried. I would suggest to read:
Thinking with Joins
Nested Selections
and other tutorials:
https://github.com/mbostock/d3/wiki/Tutorials
EDIT
In case the different array items have different meaning, it is common to use an Object instead (http://fiddle.jshell.net/YaAkv/1/):
var data = [{ fruit: 'apples', color: 'red'},
{ fruit: "oranges", color: "orange"},
{ fruit: "bananas", color: "yellow"}
];
var diventer = d3.select("body").selectAll("div.item")
.data(data)
.enter().append("div")
.attr("class", "item");
diventer.append("div")
.attr("class", "fruit")
.text(function(d) { return d.fruit; });
diventer.append("div")
.attr("class", "color")
.text(function(d) { return d.color; });
Then the output would be like:
<div class="item">
<div class="fruit">apples</div>
<div class="color">red</div>
</div>
<div class="item">
<div class="fruit">oranges</div>
<div class="color">orange</div>
</div>
<div class="item">
<div class="fruit">bananas</div>
<div class="color">yellow</div>
</div>
This could also be achieved with the original 2D array in the following way (http://fiddle.jshell.net/YaAkv/2/):
var data = [['apples','red'], ["oranges", "orange"], ["bananas", "yellow"]];
var diventer = d3.select("body").selectAll("div.item")
.data(data)
.enter().append("div")
.attr("class", "item");
diventer.append("div")
.attr("class", "fruit")
.text(function(d) { return d[0]; });
diventer.append("div")
.attr("class", "color")
.text(function(d) { return d[1]; });
EDIT
Solution without storing selection in variable:
var data = [['apples','red'], ["oranges", "orange"], ["bananas", "yellow"]];
d3.select("body").selectAll("div.item")
.data(data)
.enter().append("div")
.attr("class", "item")
.each(function(d) {
d3.select(this).append("div")
.attr("class", "fruit")
.text(d[0]);
d3.select(this).append("div")
.attr("class", "color")
.text(d[1]);
});
​