My approach involves setting the nodes as fixed:
let link = svg.append("g")
.attr("class", "links")
.selectAll("line")
.data(graph.links)
.enter().append("line")
.attr("stroke-width", () => 4)
let node = svg.append('g')
.attr("class", "nodes")
.selectAll(".node")
.data(graph.nodes)
.enter().append("g")
.attr("class", "node")
.call(
d3.drag()
.on("start", Node.dragstarted)
.on("drag", Node.dragged)
.on("end", Node.dragended))
node.append("title")
.text(d => d.country)
node.append('image')
.attr('xlink:href', d => 'https://rawgit.com/hjnilsson/country-flags/master/svg/' + d.code + '.svg')
.attr('height', d => 2.5 * (area[d.code]||5))
.attr('width', d => 4 * (area[d.code])||5)
simulation
.nodes(graph.nodes.map(c => {
if(latlong[c.code] === undefined) {
console.log(c,'missing lat/long data')
return c
}
c.x = (+latlong[c.code][0])
c.y = (+latlong[c.code][1])
c.fixed = true
return c
}))
.on("tick", ticked)
While my code effectively displays images in different locations, there seems to be an issue with the fixed property not functioning as intended.
You can view the code here: codepen
If anyone has insights on how to configure the canvas so that elements do not escape from the top or bottom, I'd appreciate any guidance on that matter as well.