d3力导向图增加节点_为D3力导向的布局节点设置不同的图像

I've been trying to make a specific type of force direct graph, similar to this (http://bl.ocks.org/mbostock/950642):

However, instead of having all the same images I wish to have different images representing different information on the graph.

My first step to this is being able to change all the circle images to random linked shapes. Whatever I try to implement in my code, the circles I have just disappear, instead of being replaced by different shapes. Any help on this problem would be great. Here is the code. Sorry, I'm also new to this 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

解决方案

This is a jsfiddle that is exuivalent to the first example that you linked. I juist changed getting data to be from the JavaScript code instead of json file, since jsfiddle doesn't support external json files that well.

First Solution

Now, let's replace constant image with set of different images

Instead of this code:

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

we'll insert this 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;

})

and we'll get this:

Second Solution

As you suggested in your code from the question, one could use built-in SVG symbols.

Instead of this whole segment for inserting images:

node.append("image")

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

.attr("x", -8)

.attr("y", -8)

.attr("width", 16)

.attr("height", 16);

we could use this 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);

and we'll get this:

Hope this helps.