D3 to nest or not to nest selections - examples

<!DOCTYPE html>
<html>
<head>
    <title>Map</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@2.10.3/d3.v2.js"></script>
    <style type="text/css">
        .one {
            background: #a7eea4;
        }
        .two {
            background: #6cbeee;

}
        div {
            margin: 3px;
        }
    </style>
</head>
<body>

<code>   var data = [['apples','red'], ["oranges", "orange"], ["bananas", "yellow"]];
</code>

<h3>List all first entries in array then all second ones </h3>
<div  id='chain'> </div>
<h3>Second element is nested inside first element</h3>
<div  id='nested'> </div>
<h3>Both elements are contained in a third element</h3>
<div  id='append'> </div>

<p>Documentation: <a href="https://bost.ocks.org/mike/nest/">https://bost.ocks.org/mike/nest/</a></p>
<script type="text/javascript">

var data = [['apples','red'], ["oranges", "orange"], ["bananas", "yellow"]];

var anchor = d3.select("#chain");

var div1 = anchor.selectAll("#chain div")
            .data(data);

div1
            .enter().append("div")
            .attr("class","one")
            .text(function(d) { return d[0];});

div1
            .enter().append("div")
            .attr("class","two")
            .text(function(d) { return d[1];});

anchor = d3.select("#nested");

var div2 = anchor.selectAll("#nested div")
            .data(data);

div2
            .enter().append("div")
            .attr("class","one")
            .text(function(d) { return d[0];});

div2
            .append("div")           //  <--------- removed enter() here
            .attr("class","two")
            .text(function(d) { return d[1];});

anchor = d3.select("#append");

var div3 = anchor.selectAll("#append div")
            .data(data)
            .enter().append("div")
            .attr("class","row");

div3.each(function(d) {         //  <-- each is the magic - requires an outer div

d3.select(this).append("div")
           .attr("class","one")
           .text(function(d) { return d[0];});

d3.select(this).append("div")
                .attr("class","two")
                .text(function(d) { return d[1];});
        });

</script>

</body>
</html>

Modified http://mbostock.github.com/d3/d3.js to a secure url

https://mbostock.github.com/d3/d3.js