¿El diseño dirigido por la fuerza de D3-JS admite la imagen como nodo?
-
25-10-2019 - |
Pregunta
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?
Solución
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
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow