I am attempting to include a sibling before a series of div elements that have been generated using the .enter() method. Here is my current setup:
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 })
The code above generates the following output:
<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>
My goal now is to insert a sibling element next to the .child elements which will display the text retrieved from hierarchies.property.name. The desired final output should be:
<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>