Impostazione di diverse immagini per i nodes di layout di forza D3

Ho cercato di creare un tipo specifico di grafico diretto di forza, simile a questo ( http://bl.ocks.org/mbostock/950642 ):

immettere qui la descrizione dell'immagine

Tuttavia, invece di avere tutte le stesse immagini, vorrei avere diverse immagini che rappresentano informazioni diverse sul grafico.

Il mio primo passo a questo è poter modificare tutte le immagini del cerchio a forms casuali collegate. Qualunque cosa cerchi di implementare nel mio codice, i cerchi appena scomparsi, invece di essere sostituiti da forms diverse. Qualsiasi aiuto su questo problema sarebbe fantastico. Ecco il codice. Mi dispiace, sono anche nuovo a questo sito.

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

Questo è un jsfiddle che è esiguo al primo esempio che hai collegato. Io juist ho cambiato i dati ottenuti dal codice JavaScript invece che dal file json, in quanto jsfiddle non support i file json esterni che bene.


Prima soluzione

Ora, sostituiamo l'image costante con un insieme di immagini diverse

Invece di questo codice:

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

inseriremo questo codice:

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

e noi otterremo questo :

immettere qui la descrizione dell'immagine


Seconda soluzione

Come ha suggerito nel tuo codice dalla domanda, si potrebbero utilizzare simboli SVG incorporati.

Invece di questo integer segmento per l'inserimento di immagini:

 node.append("image") .attr("xlink:href", "https://github.com/favicon.ico") .attr("x", -8) .attr("y", -8) .attr("width", 16) .attr("height", 16); 

possiamo usare questo codice:

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

e noi otterremo questo :

immettere qui la descrizione dell'immagine


Spero che questo ti aiuti.