d3 js nodes as images

Question

using this http://bl.ocks.org/950642 we can see how to add images to nodes, the question now is how to add different images on the nodes depending on the json data, for example if it has value group:0 to have one image on that node where group:1 node will have another image. as i could see the creation of the nodes goes by the json and it add same class to all nodes so which way could this be altered to have different images depending on the json data.

Answer 1

Define the "xlink:href" attribute as a function of data rather than a constant. For example:

// A map from group ID to image URL.
var imageByGroup = {
  "0": "red.png",
  "1": "green.png"
};

// Set the xlink:href attribute dynamically by looking up the URL.
image.attr("xlink:href", function(d) {
  return imageByGroup[d.group];
});

Answer 2

It's an old question but you can add different images defined by the JSON itself:

//Include info in JSON
"nodes":[
    {"name":"Zapata","group":1,"imagen":"changa.png"},
    {"name":"Villa","group":1,"imagen":"poeta.png"},
    [...]

//Add some function like this
function imagen(d) { return d.imagen; }

//Or add it to node image attribute
image.attr("xlink:href", function(d) { return d.imagen });