Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

104
Views
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
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!