Я пытаюсь добавить родственника перед к серии div, которые были созданы на .enter(). Пока у меня есть:
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.info(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>
Мне нужно вставить родственника элементов .child, который получает его .text() от hierarchies.property.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>



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Вам не нужно вставлять брата или сестру, вы можете продолжать использовать обычные выборки с append:
const property = hierarchy.selectAll('.property')
.data(function(d) {
return [d.property]
})
.enter().append('div').classed("property", true)
.text(function(d) {
return d.name
})
Просто создайте это выделение после const hierarchy и перед const children. Это даст вам такую структуру:
<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>
Вот демонстрация:
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) {
return d.hierarchies
})
.enter().append('div').classed("hierarchy", true)
const property = hierarchy.selectAll('.property')
.data(function(d) {
return [d.property]
})
.enter().append('div').classed("property", true)
.text(function(d) {
return d.name
})
const children = hierarchy.selectAll('.hierarchy')
.data(function(d) {
return d.children
})
.enter().append('div').classed("child", true)
.text(function(d) {
return d.name
})<script src = "https://d3js.org/d3.v5.min.js"></script>
Еще раз спасибо @Gerardo, это именно то, что я искал. В конце концов, я получу эти избранные!