I want to visualize the “children” insight each node. I guess the D3v6 .join() function can be nested. Unfortunately I can´t find any example. The snippet below contains an outerGraph with 3 nodes and children as attribute. So far those children aren´t used yet.
The innerGraph instead visualize the small nodes which will be obsolete as soon as the children approach is working. Another Idea would be to work with those two graphs and create a gravity / cluster, which will be the parent.
Goal: Either utilize the children attribute or combine both graphs with the help of an cluster /gravity or even nested join(). I am appreciating any hint / tip. The visuals result should be:
JavaScript
x
245
245
1
<!DOCTYPE html>2
<html lang="en">3
4
<head>5
<meta charset="UTF-8">6
<title>D3v6 nested nodes</title>7
<script src="https://d3js.org/d3.v6.min.js"></script>8
</head>9
10
<style>11
body {12
background-color: whitesmoke;13
}14
</style>15
16
<body>17
<script>18
var svg = d3.select("body").append("svg")19
.attr("width", window.innerWidth)20
.attr("height", window.innerHeight);21
22
var width = window.innerWidth23
var height = window.innerHeight24
25
var outerLinkContainer = svg.append("g").attr("class", "outerLinkContainer")26
var outerNodeContainer = svg.append("g").attr("class", "outerNodeContainer")27
28
var innerLinkContainer = svg.append("g").attr("class", "innerLinkContainer")29
var innerNodeContainer = svg.append("g").attr("class", "innerNodeContainer")30
31
//###############################################32
//############# outer force Layouts #############33
//###############################################34
35
var outerGraph = {36
"nodes": [37
{38
"id": "A",39
"children": [40
{41
"id": "A1"42
},43
{44
"id": "A2"45
}46
]47
},48
{49
"id": "B",50
"children": [51
{52
"id": "B1"53
},54
{55
"id": "B2"56
}57
]58
},59
{60
"id": "C",61
"children": [62
{63
"id": "C1"64
},65
{66
"id": "C2"67
}68
]69
}70
],71
"links": [72
{73
"source": "A",74
"target": "B"75
},76
{77
"source": "B",78
"target": "C"79
},80
{81
"source": "C",82
"target": "A"83
},84
]85
}86
87
var outerLayout = d3.forceSimulation()88
.force("center", d3.forceCenter(width / 2, height / 2))89
.force("charge", d3.forceManyBody().strength(-500))90
.force("link", d3.forceLink().id(function (d) {91
return d.id;92
}).distance(200))93
94
var outerLinks = outerLinkContainer.selectAll(".link")95
.data(outerGraph.links)96
.join("line")97
.attr("class", "link")98
.style("stroke", "black")99
.style("opacity", 0.2)100
101
var outerNodes = outerNodeContainer.selectAll("g.outer")102
.data(outerGraph.nodes, function (d) { return d.id; })103
.join("circle")104
.attr("class", "outer")105
.style("fill", "pink")106
.style("stroke", "blue")107
.attr("r", 40)108
.call(d3.drag()109
.on("start", dragStarted)110
.on("drag", dragged)111
.on("end", dragEnded)112
)113
114
outerLayout115
.nodes(outerGraph.nodes)116
.on("tick", ticked)117
118
outerLayout119
.force("link")120
.links(outerGraph.links)121
122
//###############################################123
//############## inner force Layout #############124
//###############################################125
126
var innerGraph = {127
"nodes": [128
{ "id": "A1" },129
{ "id": "A2" }130
],131
"links": [132
{133
"source": "A1",134
"target": "A2"135
}136
]137
}138
139
var innerlayout = d3.forceSimulation()140
.force("center", d3.forceCenter(width / 2, height / 2))141
.force("charge", d3.forceManyBody().strength(-500))142
.force("link", d3.forceLink().id(function (d) {143
return d.id;144
}).distance(200))145
146
var innerLinks = innerLinkContainer.selectAll(".link")147
.data(innerGraph.links)148
.join("line")149
.attr("class", "link")150
.style("stroke", "black")151
152
var innerNodes = innerNodeContainer.selectAll("g.inner")153
.data(innerGraph.nodes, function (d) { return d.id; })154
.join("circle")155
.style("fill", "orange")156
.style("stroke", "blue")157
.attr("r", 6)158
.attr("class", "inner")159
.attr("id", function (d) { return d.id; })160
.call(d3.drag()161
.on("start", dragStarted)162
.on("drag", dragged)163
.on("end", dragEnded)164
)165
166
innerlayout167
.nodes(innerGraph.nodes)168
.on("tick", ticked)169
170
innerlayout171
.force("link")172
.links(innerGraph.links)173
174
//###############################################175
//################## functons ###################176
//###############################################177
178
function ticked() {179
180
outerLinks181
.attr("x1", function (d) {182
return d.source.x;183
})184
.attr("y1", function (d) {185
return d.source.y;186
})187
.attr("x2", function (d) {188
return d.target.x;189
})190
.attr("y2", function (d) {191
return d.target.y;192
});193
194
innerLinks195
.attr("x1", function (d) {196
return d.source.x;197
})198
.attr("y1", function (d) {199
return d.source.y;200
})201
.attr("x2", function (d) {202
return d.target.x;203
})204
.attr("y2", function (d) {205
return d.target.y;206
});207
208
outerNodes.attr("transform", function (d) {209
return "translate(" + d.x + "," + d.y + ")";210
});211
212
innerNodes.attr("transform", function (d) {213
return "translate(" + (d.x) + "," + (d.y) + ")";214
});215
}216
217
218
function dragStarted(event, d) {219
if (!event.active)220
221
outerLayout.alphaTarget(0.3).restart();222
innerlayout.alphaTarget(0.3).restart();223
224
d.fx = d.x;225
d.fy = d.y;226
}227
228
function dragged(event, d) {229
d.fx = event.x;230
d.fy = event.y;231
}232
233
function dragEnded(event, d) {234
if (!event.active)235
236
outerLayout.alphaTarget(0)237
innerlayout.alphaTarget(0)238
239
d.fx = undefined;240
d.fy = undefined;241
}242
</script>243
</body>244
245
</html>I will update the post as soon as I found a solution.
Advertisement
Answer
Here’s a slightly hack way to do it – I am a bit disappointed in the outcome because if you play with the outerNodes then the links between innerNodes cross over in an unattractive way.
The changes I made in your code:
- update
innerGraphsonodeshave aparentproperty (plus add the links required to match your screenshot in the question) - add an additional class on
outerNodesso that each outer node can be identified e.g..outer_A,.outer_Betc - add an additional class on
innerNodesso that each inner node can be identified e.g..child_A1,.child_A2etc - in
ticked– forinnerNodesreturn a point for the inner node so that it is sitting inside centre of it’s parent at roughly 20px from the centre on the vector between the original force simulation selected point and the parent’s centre. - in
ticked– forinnerLinks, force thesourceandtargetcoordinates to update per the previous step
Those last two points are per here and here.
So it works – but only just. Vertical scrolling in the stack snippet seems to upset it a bit but it’s maybe better if you try it out on your own dev environment. I still think you could you look at other tools – maybe this one from cytoscape.js and also the webcola example I mentioned in the comments?
JavaScript
1
257
257
1
var svg = d3.select("body").append("svg")2
.attr("width", window.innerWidth)3
.attr("height", window.innerHeight);4
5
var width = window.innerWidth6
var height = window.innerHeight7
8
var outerLinkContainer = svg.append("g").attr("class", "outerLinkContainer")9
var outerNodeContainer = svg.append("g").attr("class", "outerNodeContainer")10
11
var innerLinkContainer = svg.append("g").attr("class", "innerLinkContainer")12
var innerNodeContainer = svg.append("g").attr("class", "innerNodeContainer")13
14
//###############################################15
//############# outer force Layouts #############16
//###############################################17
18
var outerGraph = {19
"nodes": [20
{21
"id": "A",22
"children": [23
{24
"id": "A1"25
},26
{27
"id": "A2"28
}29
]30
},31
{32
"id": "B",33
"children": [34
{35
"id": "B1"36
},37
{38
"id": "B2"39
}40
]41
},42
{43
"id": "C",44
"children": [45
{46
"id": "C1"47
},48
{49
"id": "C2"50
}51
]52
}53
],54
"links": [55
{56
"source": "A",57
"target": "B"58
},59
{60
"source": "B",61
"target": "C"62
},63
{64
"source": "C",65
"target": "A"66
},67
]68
}69
70
var outerLayout = d3.forceSimulation()71
.force("center", d3.forceCenter(width / 2, height / 2))72
.force("charge", d3.forceManyBody().strength(-500))73
.force("link", d3.forceLink().id(function (d) {74
return d.id;75
}).distance(200))76
77
var outerLinks = outerLinkContainer.selectAll(".link")78
.data(outerGraph.links)79
.join("line")80
.attr("class", "link")81
.style("stroke", "black")82
.style("opacity", 0.2)83
84
var outerNodes = outerNodeContainer.selectAll("g.outer")85
.data(outerGraph.nodes, function (d) { return d.id; })86
.join("circle")87
.attr("class", d => `outer outer_${d.id}`)88
.style("fill", "pink")89
.style("stroke", "blue")90
.attr("r", 40)91
.call(d3.drag()92
.on("start", dragStarted)93
.on("drag", dragged)94
.on("end", dragEnded)95
)96
97
outerLayout98
.nodes(outerGraph.nodes)99
.on("tick", ticked)100
101
outerLayout102
.force("link")103
.links(outerGraph.links)104
105
//###############################################106
//############## inner force Layout #############107
//###############################################108
109
var innerGraph = {110
"nodes": [111
{ "id": "A1", "parent": "A" },112
{ "id": "A2", "parent": "A" },113
{ "id": "B1", "parent": "B" },114
{ "id": "B2", "parent": "B" },115
{ "id": "C1", "parent": "C" },116
{ "id": "C2", "parent": "C" }117
],118
"links": [119
{120
"source": "A1",121
"target": "A2"122
},123
{124
"source": "A2",125
"target": "B2"126
},127
{128
"source": "A1",129
"target": "C2"130
},131
{132
"source": "B1",133
"target": "B2"134
},135
{136
"source": "B1",137
"target": "C1"138
},139
{140
"source": "C2",141
"target": "C1"142
}143
]144
}145
146
var innerlayout = d3.forceSimulation()147
.force("center", d3.forceCenter(width / 2, height / 2))148
.force("charge", d3.forceManyBody().strength(-500))149
.force("link", d3.forceLink().id(function (d) {150
return d.id;151
}).distance(200))152
153
var innerLinks = innerLinkContainer.selectAll(".link")154
.data(innerGraph.links)155
.join("line")156
.attr("class", "link linkChild")157
.style("stroke", "black")158
159
var innerNodes = innerNodeContainer.selectAll("g.inner")160
.data(innerGraph.nodes, function (d) { return d.id; })161
.join("circle")162
.style("fill", "orange")163
.style("stroke", "blue")164
.attr("r", 6)165
.attr("class", d => `inner child_${d.id}`)166
.attr("id", function (d) { return d.id; })167
.call(d3.drag()168
.on("start", dragStarted)169
.on("drag", dragged)170
.on("end", dragEnded)171
)172
173
innerlayout174
.nodes(innerGraph.nodes)175
.on("tick", ticked)176
177
innerlayout178
.force("link")179
.links(innerGraph.links)180
181
//###############################################182
//################## functons ###################183
//###############################################184
185
function ticked() {186
187
outerLinks188
.attr("x1", function (d) {189
return d.source.x;190
})191
.attr("y1", function (d) {192
return d.source.y;193
})194
.attr("x2", function (d) {195
return d.target.x;196
})197
.attr("y2", function (d) {198
return d.target.y;199
});200
201
outerNodes.attr("transform", function (d) {202
return "translate(" + d.x + "," + d.y + ")";203
});204
205
innerNodes.attr("transform", function (d) {206
var parent = d3.select(`.outer_${d.parent}`);207
var pr = parent.node().getBoundingClientRect();208
var prx = pr.left + (pr.width / 2);209
var pry = pr.top + (pr.height / 2);210
var distance = Math.sqrt( ((d.x - prx) ** 2) + ((d.y - pry) ** 2 ));211
var ratio = 20 / distance;212
var childX = ((1 - ratio) * prx) + (ratio * d.x);213
var childY = ((1 - ratio) * pry) + (ratio * d.y);214
return "translate(" + (childX) + "," + (childY) + ")";215
});216
217
innerLinks.attr("x1", d => {218
var m1 = d3.select(`.child_${d.source.id}`).node().transform.baseVal[0].matrix;219
return m1.e;220
}).attr("y1", d => {221
var m1 = d3.select(`.child_${d.source.id}`).node().transform.baseVal[0].matrix;222
return m1.f;223
}).attr("x2", d => {224
var m2 = d3.select(`.child_${d.target.id}`).node().transform.baseVal[0].matrix;225
return m2.e;226
}).attr("y2", d => {227
var m2 = d3.select(`.child_${d.target.id}`).node().transform.baseVal[0].matrix;228
return m2.f;229
});230
231
}232
233
234
function dragStarted(event, d) {235
if (!event.active)236
237
outerLayout.alphaTarget(0.3).restart();238
innerlayout.alphaTarget(0.3).restart();239
240
d.fx = d.x;241
d.fy = d.y;242
}243
244
function dragged(event, d) {245
d.fx = event.x;246
d.fy = event.y;247
}248
249
function dragEnded(event, d) {250
if (!event.active)251
252
outerLayout.alphaTarget(0)253
innerlayout.alphaTarget(0)254
255
d.fx = undefined;256
d.fy = undefined;257
}JavaScript
1
1
1
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.5.0/d3.min.js"></script>