Configuring various images for layout nodes with forced installation of D3

Question

I am trying to make a specific type of direct graph similar to this ( http://bl.ocks.org/mbostock/950642 ):

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

My first step towards this is the ability to change all the images of the circle to randomly connected shapes. No matter what I try to implement in my code, the circles that I just disappeared, instead of replacing with different shapes. Any help on this issue would be great. Here is the code. Unfortunately, I am also not familiar with 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 jsfiddle, which is exceptional for the first example you linked. I juist changed the retrieval of data from JavaScript code instead of a json file, since jsfiddle does not support external json files, which is good.

---

First decision

Now replace the permanent image with many different images

Instead of this code:

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

we will 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 get this :

---

Second solution

As you suggested in your code from the question, you can use the built-in SVG characters.

Instead, the entire 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 get this :

---

Hope this helps.