为什么我的图像没有出现在D3图表的节点中？

Question

小提琴：http://jsfiddle.net/jzaun/SCb7T/

代码：

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

Answer 1

您不能追加image到circle元素 - SVG规范不允许这样。相反，直接添加图像并在tick函数上设置transform而不是cx/cy。

完整示例here。