javascript - Replace d3.js symbols with images -

referring fiddle example:

i need replace symbols images...or possibly single image @ first..like instance, image:

https://github.com/favicon.ico 

what trying in code follows:

vis.selectall("path")      .data(nodes)    .enter().append("path")      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })      .append("image")    .attr("xlink:href", "https://github.com/favicon.ico")        .attr("x", -8)        .attr("y", -8)        .attr("width", 16)        .attr("height", 16)        .style("stroke", "black")        .style("stroke-width", "1px")        .call(force.drag); 

it appending image tag each of path tags, not showing image itself. hints?

you're appending each image child of each path. want append group contains both path , image (which think asking in first comment).

something this:

var groups = vis.selectall("g")     .data(nodes).enter()     .append("g")     .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })     .call(force.drag);  groups.append("path")     .attr("d", d3.svg.symbol()         .size(function(d) { return d.size; })         .type(function(d) { return d.type; }))     .style("fill", "steelblue")     .style("stroke", "black")     .style("stroke-width", "1.5px");  groups.append("image")    .attr("xlink:href", "https://github.com/favicon.ico")        .attr("x", -8)        .attr("y", -8)        .attr("width", 16)        .attr("height", 16)        .style("stroke", "black")        .style("stroke-width", "1px"); 

see: http://jsfiddle.net/findango/a7as6/4/