Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

105
Vistas
D3 establece imágenes de datos como fondo en círculos

¿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)

ingrese la descripción de la imagen aquí

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

about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda