d3.js - D3.js DOM 操作与动态兄弟

Question

我想知道如何处理使用动态兄弟创建动态对象。我认为 D3 中的 DOM 操作有点难以理解。有很多文字，但请稍等 - 我可能搞砸了一些非常简单的事情。无论如何，我有这样的数据：

{
    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"
                }
            ]
        }
    ]
}

这些数据将不时使用 JSON 函数重新加载，我将使用 D3 构建数据表（我知道 D3 可能不是这类事情的最佳选择，但它是已经很重的 D3 的一部分应用程序）。我希望 D3 为每个站点（“SomeSite”、“SomeOtherSite”）制作一个列表。当然，它们本身必须是动态的，因为 JSON 可能会使用不再包含此站点的数据进行更新。

我已经设法在这样的结构中建立了所有“帖子”的基本列表：

<ul>
  <li><a>Post 1</a></li>
  <li><a>Post 2</a></li>
  <li><a>Post 3</a></li>
</ul>

使用此代码：

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();

这按预期工作并正确更新。但是，我想在列表上方包含一个标题，采用这样的结构。

<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>

我现在尝试了很多不同的东西，但似乎无法让它发挥作用。我已经尝试将 div 包裹起来，并将 h1-tag 与 ul-tag 一起添加/插入，但它总是在 ul 内结束。我已经阅读了（非常好的）文档，但是我很难找到真正好的例子来说明特别是“插入”是如何工作的。

任何帮助将非常感激。:)

Answer 1

这是一个应该使用嵌套选择的示例。