¿He estado tratando de agregar imágenes como fondo de mis nodos en un gráfico dirigido por fuerza usando D3.js? Incluso con la ayuda de otros temas similares resueltos, lo he intentado usando defs y pattern y no he tenido éxito. Deseo cambiar el fondo negro a la imagen desde el enlace de la imagen en los datos de los nodos. La imagen debe escalar al tamaño del círculo y llenar todo el nodo excepto el trazo del nodo.
Aquí hay una versión simplificada de los datos que uso:
const links = [ {src:"Amazon",target:"Aurora"}, {src:"Amazon",target:"Aurora"}, {src:"Amazon",target:"Zoox"}, {src:"Amazon",target:"Rivian"}, {src:"Amazon",target:"Torc"}, {src:"Amazon",target:"Intel"} ] const nodes = [ {id:"Amazon",image:"https://images-eu.ssl-images-amazon.com/images/G/02/gc/designs/livepreview/a_generic_10_uk_noto_email_v2016_uk-main._CB485921599_.png"}, {id:"Aurora",image:"https://res-3.cloudinary.com/crunchbase-production/image/upload/c_lpad,h_170,w_170,f_auto,b_white,q_auto:eco/oeagjbu7wau6o16zdhb1"}, {id:"Zoox",image:"https://res-4.cloudinary.com/crunchbase-production/image/upload/c_lpad,h_170,w_170,f_auto,b_white,q_auto:eco/kpc7mmk886nbbipbeqau"}, {id:"Rivian",image:"https://res-4.cloudinary.com/crunchbase-production/image/upload/c_lpad,h_170,w_170,f_auto,b_white,q_auto:eco/sdz7aspakybuxp7oojvh"}, {id:"Torc",image:"https://res-2.cloudinary.com/crunchbase-production/image/upload/c_lpad,h_170,w_170,f_auto,b_white,q_auto:eco/smfgyxvfot1dwq4vqvo7"}, {id:"Intel",image:"https://res-3.cloudinary.com/crunchbase-production/image/upload/c_lpad,h_170,w_170,f_auto,b_white,q_auto:eco/v1505768454/wrhwa2ogipbd1o6tgggi.png"}, ]Así es como creo mis nodos: aquí también es donde he estado tratando de implementar el fondo de la imagen. Estoy bastante seguro de que es aquí donde se supone que debo implementarlo.
const node = svg.append("g") .attr("fill", "black") .attr("stroke", "grey") .attr("stroke-opacity", 1) .attr("stroke-width", 2) .selectAll("circle") .data(nodes) .join("circle") .attr("r", 40) .call(drag(simulation));Aquí hay una captura de pantalla de lo que tengo en este momento (con un poco más de datos)
Si el resto de mi código puede ser de alguna ayuda, hágamelo saber y pegaré el código completo de mi gráfico dirigido por la fuerza aquí.
Gracias de antemano por tu consejo