D3.js DOM manipulation with dynamic siblings - d3.js

Question

I'm wondering how to handle the creation of dynamic objects with dynamic siblings. DOM manipulation in D3 is kind of hard to wrap your head around I think. There's a lot of text but hang on - I'm probably messing up something really simple. Anyways, I have this kind of data:
{
name: "Data",
children: [
{
name: "SomeSite",
children: [
{
title: "Some title of a post",
href: "http://example.com/sometitleofapost"
},
{
title: "The title of another post",
href: "http://example.com/thetitleofanotherpost"
}
]
},
{
name: "SomeOtherSite",
children: [
{
title: "Post from another site",
href: "http://example.com/postfromanothersite"
}
]
}
]
}
This data will be reloaded with the JSON-function once in a while and I will use D3 to built a table of the data (I know D3 is maybe not the best choice for this kind of thing but it's part of an already D3-heavy app). I'd like D3 to make a list for each site ("SomeSite", "SomeOtherSite"). These must of course be dynamic in themselves as the JSON might update with data that does not contain this site anymore.
I've managed to built a basic list of all the "posts" in a structure like this:
<ul>
<li><a>Post 1</a></li>
<li><a>Post 2</a></li>
<li><a>Post 3</a></li>
</ul>
Using this code:
var control_list = d3.select("body").append("div")
.attr("id", "control-list")
.attr("class", "control-list");
var control_list_links = control_list.append("div")
.attr("id", "control-list-links")
.attr("class", "control-list-links");
var link_container = control_list_links.selectAll(".link-container")
.data(data.children);
link_container.enter()
.append("ul")
.attr("class", "link-container");
var link_links = link_container.selectAll('li')
.data(function(d) { return d.children });
link_links.enter()
.append("li")
.append("a");
link_links.select("a").text(function(d) { return d.title })
.attr("href", function(d) { return d.href });
link_container.exit().remove();
link_links.exit().remove();
This works as intended and updates correctly. However, I'd like to include a headline above the list, in a structure like this.
<div>
<h1>SomeSite</h1>
<ul>
<li><a>Post 1</a></li>
<li><a>Post 2</a></li>
</ul>
</div>
<div>
<h1>SomeOtherSite</h1>
<ul>
<li><a>Post 3</a></li>
</ul>
</div>
I've tried a lot of different things now and just can't seem to get it to work. I've tried wrapping a div around and appending/inserting the h1-tag along with the ul-tag but it always ends up inside the ul instead. I've been through the (very good) documentation but I have a hard time finding really good examples of exactly how especially "insert" works.
Any help would be much appreciated. :)

Answer 1

This is an example where nested selections should be used.