Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

106
Visualizações
D3 set images from data as background in circles

I have been trying to add images as background of my nodes in an force-directed graph using D3.js? Even with the help of other resolved similar topics, I have tried by using defs and pattern and have been unsuccessfull. I wish to change the black background into the image from the image link in the nodes data. The image should scale to the circle size and fill the entire node exept for the node's stroke.

Here is a simplified version of the data that I use :

 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"},
]

Here is how i create my nodes : This is also where i have been trying to implement the image background. I am pretty sure it is here where I am supposed to implement it.

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

Here is a screenshot of what i have at the moment (with slightly more data)

enter image description here

If the rest of my code can be of any help , please let me know and i will paste the entire code of my force-directed graph in here.

Thanks in advance your your advice

about 4 years ago · Juan Pablo Isaza
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda