¿El diseño dirigido por la fuerza de D3-JS admite la imagen como nodo?

Question

D3 posee Una demostración de un diseño de gráfico dirigido por la fuerza.

En lugar de círculos, quiero que todos los nodos en el gráfico sean imágenes.

Entonces, cambié

 .append("svg:circle")
      .attr("class", "node")
      .attr("cx", function(d) { return d.x; })
      .attr("cy", function(d) { return d.y; })
      .attr("r", 5)
      .style("fill", function(d) { return fill(d.group); })
      .call(force.drag);

a

.append("xhtml:img")
   .attr("src", "http://a577.phobos.apple.com/us/r1000/081/Purple/12/61/13/mzi.lgqdzwfu.png")
   .call(force.drag);

Pero no puedo ver ninguna imagen. ¿Qué estoy haciendo mal?

Answer 1

node.append("svg:image")
    .attr("class", "circle")
    .attr("xlink:href", "https://d3nwyuy0nl342s.cloudfront.net/images/icons/public.png")
    .attr("x", "-8px")
    .attr("y", "-8px")
    .attr("width", "16px")
    .attr("height", "16px");

Here is an example of using an image as the node: http://bl.ocks.org/950642