3

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

coderHook
  • 57
  • 8

1 Answers1

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;})
kurumkan
  • 2,635
  • 3
  • 31
  • 55
  • umm still not working, Can it be maybe a problem of the file I uploaded on github? Maybe I cannot link codepen to a file on github. – coderHook Oct 13 '16 at 21:09
  • http://stackoverflow.com/questions/7780550/referencing-a-css-file-in-github-repo-as-stylesheet-in-a-html-file – kurumkan Oct 14 '16 at 00:20
  • I made some changes to make it work, now I can access to the css file and png but still not working. https://coderhook.github.io/National-Contiguity-Data/flags.css – coderHook Oct 15 '16 at 21:31