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