Flag sprites not rendering in D3 force layout

Question

I am trying to get this library of CSS flag sprites to render in my D3 Force layout graph

https://www.flag-sprites.com/

However, nothing seems to render. Here is the codepen for the same.

http://codepen.io/redixhumayun/pen/ZLELvG?editors=0010

Here is the relevant code where I am trying to render the sprite

var node = svg.selectAll('.node')
                .data(data_nodes)
                .enter().append('svg:image')
                .attr('class', function(d){ return 'flag flag-'+d.code })
                .attr('src', 'blank.gif')
                .attr('width', '20px')
                .attr('height', '50px');

node.attr('x', function(d) { return (d.x - 5); })
        .attr('y', function(d) { return (d.y - 2); })
        .on('mouseover', function(d){
           console.log(d.country);
        })

Answer 1

Your problem is that you're using svg:image elements and flagsprites and its css is set up to expect regular html img elements

However, taking parts of this codepen here --> https://codepen.io/AmeliaBR/pen/mwzBD

...you can use your flagsprite image and some cropping to simulate what the flagsprites css does

So taking your codepen, first a change to your html, setting a clip and another hidden svg containing the flag sprites png as an image to reference:

  <svg class='chart'>
     <clipPath id="icon-cp" >
        <rect x="0" y="0" width="16" height="11" />
    </clipPath>
  </svg>
  <svg style="display:none">
    <image id="icon-sprite" width="256" height="176" xlink:href="https://*dropbox_addy_excised_for_privacy*/country%20data%20for%20force%20directed%20graph/flags.png" />
  </svg>

The disadvantage here is that the size of the flag sprite png and sprites need to be declared (and the address the image is at, which I've excised)

Then the nodes in your javascript need to be set up like this:

var node = svg.selectAll('.node')
                .data(data_nodes)
                .enter().append('g')
                .attr("clip-path", "url(#icon-cp)")
  ;

  node.append("use")
                .attr("xlink:href", "#icon-sprite")
                .attr('class', function(d){
                  return 'flag flag-'+d.code 
                })
  ;

// this bit then takes the background-position style from the flag-sprite css and turns it
// into a translate coordinate for use with the transform attribute
  node.selectAll("use")
    .attr("transform", function() {
     var commaed = d3.select(this).style("background-position").replace(/[px]/g, "").replace(" ", ",");
      return "translate ("+commaed+")"
  })

nodes are then adjusted like this:

node.attr('transform', function(d) { return "translate ("+(d.x - 5)+","+(d.y - 2)+")"; })
        .on('mouseover', function(d){
           console.log(d.country);
        })