add a sub element in d3js using data binding - d3.js

Question

I have a table data like
ID, Name, Value
001, ABC, 123
002, DEF, 345
and I would like to display it like:
<div id="001">
<h1>ABC</h1> <p>123</p>
I tried the following:
var divs = root.selectAll("div").data(data)
.enter()
.append("div")
.attr("id", function (d) { return d.ID; })
.append("h1")
.text(function (d) { return d.Name; })
.selectAll("div p").data(function (d) { return d; })
.enter().append("p")
.text(function (d) { return d.Value; })
However it only display the first level. I tried a few other options but was unsuccessful, either display nothing or display all values in each element.
I have the feeling I am missing something obvious, any pointer would be appreciated.

Answer 1

Two main changes:
firstly, you have to break your selection, appending the <h> and the <p> elements to divs. So, you'll have as many divs as objects in your data array. However, for each div, you'll append one <h> and one <p> element. Right now, you're kind of appending (more on that below) the <p> elements to the <h>, not to the divs.
Secondly, you should not create a nested selection rebinding data
(since you don't have inner arrays here, but only objects inside an
array). That would make sense if you had several <p> elements for each div, but you don't.
So, this should be your code:
var divs = root.selectAll(null)
.data(data)
.enter()
.append("div")
.attr("id", function(d) {
return d.ID;
});
divs.append("h1")
.text(function(d) {
return d.Name;
});
divs.append("p")
.text(function(d) {
return d.Value;
});
And this creates this structure:
<div id="001">
<h1>ABC</h1>
<p>123</p>
</div>
<div id="002">
<h1>DEF</h1>
<p>345</p>
</div>
Here is the demo:
var data = [{
ID: "001",
Name: "ABC",
Value: "123"
}, {
ID: "002",
Name: "DEF",
Value: "345"
}];
var root = d3.select("body");
var divs = root.selectAll(null)
.data(data)
.enter()
.append("div")
.attr("id", function(d) {
return d.ID;
});
divs.append("h1")
.text(function(d) {
return d.Name;
});
divs.append("p")
.text(function(d) {
return d.Value;
});
<script src="https://d3js.org/d3.v4.min.js"></script>