d3 js nodi come immagini

Question

utilizzando questo http://bl.ocks.org/950642 possiamo vedere come aggiungere immagini ai nodi, la domanda ora è come aggiungere immagini differenti sui nodi a seconda dei dati di JSON, ad esempio se ha gruppo di valori: 0 avere un'immagine su quel nodo dove gruppo: 1 nodo avrà un'altra immagine. come ho potuto vedere la creazione dei nodi passa da JSON e aggiunge la stessa classe a tutti i nodi, quindi in quale modo potrebbe essere modificato per avere immagini diverse a seconda dei dati JSON.

Answer 1

Definire "xlink: href" attribute come una funzione di dati anziché una costante. Per esempio:

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

Si tratta di una vecchia questione, ma è possibile aggiungere immagini diverse definite dalla JSON sé:

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