Définition d'images différentes pour les noeuds de mise en page D3 forcé

J'ai essayé de créer un graphique spécifique de type spécifique de force, semblable à celui-ci ( http://bl.ocks.org/mbostock/950642 ):

Entrez la description de l'image ici

Cependant, au lieu d'avoir toutes les mêmes images, je souhaite avoir des images différentes représentant des informations différentes sur le graphique.

Ma première étape consiste à pouvoir modifier toutes les images du cercle sur des formes liées au hasard. Quoi que j'essaie d'implémenter dans mon code, les cercles que je viens de disparaître, au lieu d'être remplacés par des formes différentes. Toute aide sur ce problème serait géniale. Voici le code. Désolé, je suis également nouveau sur ce 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

C'est un jsfiddle qui est exuivant au premier exemple que vous avez lié. Je juist a changé pour obtenir des données du code JavaScript au lieu du fichier json, car jsfiddle ne supporte pas bien les fichiers json externes.

Première solution

Maintenant, remplissons l'image constante avec un ensemble d'images différentes

Au lieu de ce code:

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

Nous insérerons ce code:

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

Et nous obtiendrons ceci :

Entrez la description de l'image ici

Deuxième solution

Comme vous l'avez suggéré dans votre code à partir de la question, vous pouvez utiliser des symboles SVG intégrés.

Au lieu de tout ce segment pour l'insertion d'images:

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

Nous pourrions utiliser ce 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);

Et nous obtiendrons ceci :

Entrez la description de l'image ici

J'espère que cela t'aides.