D3.js - Labeling Nodes With Image In Force-Layout

I have the following code in my Codepen that's able to render the sprites flags (from CSS), yet it's not in the position where it should be based on the nodes's position. In fact,

Solution 1:

You are super close! This took me quite a while to figure out.

I ended up creating a flag folder filled with country pngs in my project directory. Then dynamically loaded them using the country code.

Here is how I solved the problem:

const node = svg.selectAll(".flag")
    .data(data.nodes)
    .enter().append("image")
    .attr("xlink:href", d => require(`./flag/${d.code}.png`))
    .attr("width", radius)
    .attr("height", radius)
    .call(d3.drag()
        .on("start", dragstarted)
        .on("drag", dragged)
        .on("end", dragended))