이 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

당신은 imagecircle에 요소를 추가 할 수 없습니다 - SVG 사양이 허용하지 않습니다. 대신, 이미지를 직접 추가하고 cx/cy 대신 을 tick 함수로 설정하십시오.

예 : here.