问题描述:

Fiddle: http://jsfiddle.net/jzaun/SCb7T/

Code:

var width = 500,

height = 500;

var dotSize = 50;

var color = d3.scale.category20();

var force = d3.layout.force()

.charge(-10020)

.linkDistance(dotSize)

.size([width, height]);

var svg = d3.select("body").append("svg")

.attr("width", width)

.attr("height", height);

var graph = {

"nodes":[

{"name":"Name","group":1},

{"name":"Name","group":2},

{"name":"Name","group":3},

{"name":"Name","group":4}

],

"links":[

{"source":1,"target":0,"value":1},

{"source":2,"target":0,"value":1},

{"source":3,"target":0,"value":1}

]

};

force

.nodes(graph.nodes)

.links(graph.links)

.start();

var link = svg.selectAll(".link")

.data(graph.links)

.enter().append("line")

.attr("class", "link");

var node = svg.selectAll(".node")

.data(graph.nodes)

.enter().append("circle")

.attr("class", "node")

.attr("r", dotSize)

.style("fill", function(d) { return color(d.group); });

node.append("image")

.attr("xlink:href", "http://lorempixel.com/64/64/cats")

.attr("x", -32)

.attr("y", -32)

.attr("width", 64)

.attr("height", 64);

node.append("title")

.text(function(d) { return d.name; });

force.on("tick", function() {

link.attr("x1", function(d) { return d.source.x; })

.attr("y1", function(d) { return d.source.y; })

.attr("x2", function(d) { return d.target.x; })

.attr("y2", function(d) { return d.target.y; });

node.attr("cx", function(d) { return d.x; })

.attr("cy", function(d) { return d.y; });

});

网友答案:

You can't append image to circle elements -- the SVG spec doesn't allow this. Instead, append the images directly and set transform on them in the tick function instead of cx/cy.

Complete example here.

相关阅读:
Top