Force Directed Graph Flag Positioning


I´m currently going for the Force Directed Graph - National Contiguity Challenge but I can´t seem to get the flag positioning right.

Some tips on how it is done or in which direction I have to think?

I guess I need to adjust the tick function for the nodes somehow?

Here is the link CodePen National Contiguity Force Directed Graph

D3 Force Directed Graph - CSS Sprites

Remember that the links are SVG while the flags themselves are PNG. The browser draws the links relative to the SVG element, but the flags are positioned just like anything else. You’ll have to account for this by adding the difference to the flag’s position. Since you’ve defined a 50px margin in your body, you can just hard code an additional 50 pixels.

            .style("left", function(d) {
              return (d.x + 50) + 'px';
            .style("top", function(d) {
              return (d.y + 50) + 'px';


Thank you! That does the Job and was properly explained why.