Setting different images for D3 force-directed layout nodes

Question

I've been trying to make a specific type of force direct graph, similar to this (http://bl.ocks.org/mbostock/950642):

However, instead of having all the same images I wish to have different images representing different information on the graph.

My first step to this is being able to change all the circle images to random linked shapes. Whatever I try to implement in my code, the circles I have just disappear, instead of being replaced by different shapes. Any help on this problem would be great. Here is the code. Sorry, I'm also new to this site.

 // nodes
    var nodeSelecton = svg.selectAll(".node").data(nodes).enter().append("g").attr({
        class : "node"
    }).call(force.drag);

    nodeSelecton.append("circle").attr({
       r : nodeRadius 

    }).style("fill", function(d) {
        return color(d.group);
    });

    nodeSelecton.append("svg:text").attr("text-anchor", "middle").attr('dy',   ".35em").text(function(d) {
        return d.name;
    });

    // Add a new random shape.
      // nodes.push({
        //   type: d3.svg.symbolTypes[~~(Math.random() * d3.svg.symbolTypes.length)],
          // size: Math.random() * 300 + 100

Answer 1

This is a jsfiddle that is exuivalent to the first example that you linked. I juist changed getting data to be from the JavaScript code instead of json file, since jsfiddle doesn't support external json files that well.

---

First Solution

Now, let's replace constant image with set of different images

Instead of this code:

.attr("xlink:href", "https://github.com/favicon.ico")

we'll insert this code:

.attr("xlink:href", function(d) {
    var rnd = Math.floor(Math.random() * 64 + 1);
    var imagePath =
           "http://www.bigbiz.com/bigbiz/icons/ultimate/Comic/Comic"
           + rnd.toString() + ".gif";
    console.Log(imagePath);
    return imagePath;
})

and we'll get this:

---

Second Solution

As you suggested in your code from the question, one could use built-in SVG symbols.

Instead of this whole segment for inserting images:

node.append("image")
    .attr("xlink:href", "https://github.com/favicon.ico")
    .attr("x", -8)
    .attr("y", -8)
    .attr("width", 16)
    .attr("height", 16);

we could use this code:

node.append("path")
    .attr("d", d3.svg.symbol()
    .size(function(d) {
        return 100;
    })
    .type(function(d) {
        return d3.svg.symbolTypes[~~(Math.random() * d3.svg.symbolTypes.length)];
    }))
    .style("fill", "steelblue")
    .style("stroke", "white")
    .style("stroke-width", "1.5px")
    .call(force.drag);

and we'll get this:

---

Hope this helps.