I've been trying to make a specific type of force direct graph, similar to this ():

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

I've been trying to make a specific type of force direct graph, similar to this (http://bl.ocks/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

• javascript
• image
• d3.js
• force-layout

• To achieve this, you need to append a different image. Where are you trying to do this in your code? – Lars Kotthoff Commented Aug 13, 2013 at 9:54

1 Answer 1

This is a jsfiddle that is equivalent to the first example that you linked. I just 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 a set of different images

Instead of this code:

.attr("xlink:href", "https://github./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./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./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.