Changing nodes for images in d3.js force layout graph

Question

I am trying to add images to my force layout graph, but I am unable to do it.

Here is the set of images I am trying to use: https://www.flag-sprites.com/

Here is the code on I create the img tag and add the attributes.

 //Create the nodes

  var node = svg.selectAll('.node')
      .data(nodes)
      .enter().append('g')
      .attr("class", "node")

  node.append("img")
    .attr("src", function(d){ return "blank.gif"; })
    .attr("class", function(d){ return "flag flag-" + d.code;})
    .attr("alt", function(d){ return d.country; })
    .attr("x", function(d){ return -15; })
    .attr("y", function(d){ return -15; })
    .attr("height", 1)
    .attr("width", 1);

I also upload the css file that flag-sprites generate to my github account and set it on codepen, but even when the img tag is create correctly, according to what the inspector says, I cannot make the flag appear.

Also I have the problem that when I add those images I cannot move the nodes, so there must be something wrong when I create the images that I cannot see.

Here is a link to my codepen project. force layout graph with flags

Answer 1

You can create additional class in your css that will define absolute position of your image

 .absolute{
    position: absolute;
 }

And your js part will look like

 //Create nodes as images
    var nodes = d3.select("body").selectAll("img")
        .data(dataset.nodes)
        .enter()
        .append("img")
        .attr("src", "blank.gif")
        .attr("alt", "")
        .attr("class", function(d){return "absolute flag flag-"+d.code;})