Javascript D3从对象的json属性嵌套选择和同级

我试图在

上创建的一系列
div
之前添加一个同级。到目前为止，我已经：

const data = [
    {
        "name": "foo",
        "hierarchies": [
            {
                "name": "Alpha",
                "children": [
                    {
                        "name": "A1"
                    },
                    {
                        "name": "A2"
                    },
                ],
                "property": {
                    "name":"Sub-Alpha"
                }
            },
            {
                "name": "Bravo",
                "children": [
                    {
                        "name": "B1"
                    },
                    {
                        "name": "B2"
                    },
                ],
                "property": {
                    "name":"Sub-Bravo"
                }
            }
        ]
    }
]

const system = d3.select('body').selectAll('div')
    .data(data)
        .enter().append('div').classed("system", true)

const hierarchy = system.selectAll('.system')
    .data(function(d) { console.log(d.hierarchies); return d.hierarchies })
        .enter().append('div').classed("hierarchy", true)

const children = hierarchy.selectAll('.hierarchy')
    .data(function(d, i) { return d.children })
        .enter().append('div').classed("child", true)
        .text(function(d, i) { return d.name })

这将使我获得所需的输出：

<div class="system">
  <div class="hierarchy">
    <div class="child">A1</div>
    <div class="child">A2</div>
  </div>
  <div class="hierarchy">
    <div class="child">B1</div>
    <div class="child">B2</div>
  </div>
</div>

您不需要插入同级，您可以继续使用带有
append
的常规选择：

const property = hierarchy.selectAll('.property')
  .data(function(d) {
    return [d.property]
  })
  .enter().append('div').classed("property", true)
  .text(function(d) {
    return d.name
  })

只需在
常量层次结构
之后和
常量子项
之前创建该选择。这将为您提供以下结构：

<div class="system">
    <div class="hierarchy">
        <div class="property">Sub-Alpha</div>
        <div class="child">A1</div>
        <div class="child">A2</div>
    </div>
    <div class="hierarchy">
        <div class="property">Sub-Bravo</div>
        <div class="child">B1</div>
        <div class="child">B2</div>
    </div>
</div>

再次感谢@Gerardo，这正是我想要的。我最终会得到这些选择的！
<div class="system">
    <div class="hierarchy">
        <div class="property">Sub-Alpha</div>
        <div class="child">A1</div>
        <div class="child">A2</div>
    </div>
    <div class="hierarchy">
        <div class="property">Sub-Bravo</div>
        <div class="child">B1</div>
        <div class="child">B2</div>
    </div>
</div>