d3 js nodos como imágenes

Question

usando este http://bl.ocks.org/950642 podemos ver cómo agregar imágenes a los nodos, la pregunta ahora es cómo agregar diferentes imágenes en los nodos dependiendo de los datos json, por ejemplo, si tiene un grupo de valores: 0 para tener una imagen en ese nodo donde grupo: 1 nodo tendrá otra imagen. como pude ver, la creación de los nodos pasa por el json y agrega la misma clase a todos los nodos, así que de qué manera podría ser alterado para tener diferentes imágenes dependiendo de los datos json.

Answer 1

Defina el "xlink: href" attribute como una función de los datos en lugar de una constante. Por ejemplo:

// 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

Es una vieja pregunta, pero se puede añadir diferentes imágenes definidas por el propio JSON:

//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 });