score:2

Accepted answer

Instead of circle you will have to prepare <image> svg element and place it correctly. For this example I used small circle icon:

node.append('image')
    .attr('xlink:href', 'images/circle.png')
    .attr('x', function(d, i) { return -d.r/2; })
    .attr('y', function(d, i) { return -d.r/2; })
    .attr('width', function(d, i) { return d.r + 'px'; })
    .attr('height', function(d, i) { return d.r + 'px'; })

Update: Solution with different images depends on your design and data structure. One possible solution is to define an array of images:

var images = [ 'admiration.png', 'joy.png', 'hope.png', 'sadness.png', 'surprise.png', 'anger.png', 'worry.png', 'frustration.png'];

and then select specific image (assumption is that images reside in images directory):

node.append('image')
    .attr('xlink:href', function(d, i) {
        return 'images/' + images[i];
    })
    .attr('x', function(d, i) { return -d.r/2; })
    .attr('y', function(d, i) { return -d.r/2; })
    .attr('width', function(d, i) { return d.r + 'px'; })
    .attr('height', function(d, i) { return d.r + 'px'; })

Related Query