D3 Force Directed Graph - cannot see my flags

1

I have no idea what I am doing wrong. Once I append an image to my node, all I see are the links but no flags at the nodes!

The CodePen is here

Here is the heart of the code:

var node = svg.selectAll('.node')
.data(nodes)
.enter()
.append('img')
.attr('class', function (d) {
 return 'flag flag-' + d.code;
})

 .on("mouseover", function(d) {		
        div.transition()		
            .duration(200)		
            .style("opacity", .9);		
        div	.html("Country: " + d.country)	
            .style("left", (d3.event.pageX) + "px")		
            .style("top", (d3.event.pageY - 28) + "px");	
        })					
    .on("mouseout", function(d) {		
        div.transition()		
            .duration(500)		
            .style("opacity", 0);	
    });
2

<img> tags cannot be children of <svg>.

3

Hmm…
Problem is when I change it to this:

var node = d3.select('.flags').selectAll('.node')
.data(nodes)
.enter()
.append('img')
.attr('class', function (d) {
 return 'flag flag-' + d.code;
})

… and add a .flag class to my css, I still get no flags!

4

You’re asking D3 to select the first element it can find with the class of flags, and then select all child elements within that have a class of node. You’ll need something like this

var node = d3.select('#chartdiv').selectAll('.flag')
1 Like