score:1

Accepted answer

i've used your code to assemble a small example, which you can see below.

  1. inside svg > defs, create one pattern per node and use that pattern (with the id of the company) to fetch the logo of that company;
  2. reference the pattern for the node using the information you already have.

some pointers on your code:

  1. you already use es6 logic, so you can also use array.prototype.map and other functions. they're generally much more readable (and natively implemented!) than d3.map;
  2. there is no need to keep so many arrays of values, generally having fewer sources of truth for your data will make the code simpler to maintain and update in the future;
  3. use clear variable names! ls and lt are logical when you know the context, but when you revisit this code in 6 months you might not instantly know what you were talking about when you wrote it.

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

const links = [{
    src: 'amazon',
    target: 'aurora'
  },
  {
    src: 'amazon',
    target: 'zoox'
  },
  {
    src: 'aurora',
    target: 'zoox'
  }
];

const width = 500,
  height = 500;

function forcegraph({
  nodes, // an iterable of node objects (typically [{id}, …])
  links // an iterable of link objects (typically [{src, target}, …])
}, {
  nodeid = d => d.id, // given d in nodes, returns a unique identifier (string)
  nodetitle, // given d in nodes, a title string
  nodestroke = "teal", // node stroke color
  nodestrokewidth = 2, // node stroke width, in pixels
  nodestrokeopacity = 1, // node stroke opacity
  noderadius = 20, // node radius, in pixels
  nodestrength = -750,
  linkdistance = 100,
  linkstrokeopacity = 0.6, // link stroke opacity
  linkstrokewidth = 7, // given d in links, returns a stroke width in pixels
  linkstrokelinecap = "round", // link stroke linecap
  linkstrength,
  container
} = {}) {

  // compute values.
  const n = d3.map(nodes, nodeid);

  // here: don't replace the input nodes using this complex method,
  // just object.assign({}, n) to essentially perform a deep copy of a node.

  // replace the input nodes and links with mutable objects for the simulation.
  nodes = nodes.map(n => object.assign({}, n));
  links = links.map(l => ({
    source: l.src,
    target: l.target
  }));

  const svg = d3.select('body')
    .append("svg")
    .attr("preserveaspectratio", "xminymin meet")
    .attr("viewbox", [-width / 2, -height / 2, width, height])
    .classed("svg-content-responsive", true)

  const defs = svg.append('svg:defs');

  // here: see we add one image per node
  defs.selectall("pattern")
    .data(nodes)
    .join(
      enter => {
        // for every new <pattern>, set the constants and append an <image> tag
        const patterns = enter
          .append("pattern")
          .attr("width", 48)
          .attr("height", 48);
        patterns
          .append("image")
          .attr("width", 48)
          .attr("height", 48)
          .attr("x", 0)
          .attr("y", 0);
        return patterns;
      }
    )
    // for every <pattern>, set it to point to the correct
    // url and have the correct (company) id
    .attr("id", d => d.id)
    .select("image")
    .datum(d => {
      debugger;
      return d;
    })
    .attr("xlink:href", d => {
      debugger;
      return d.image;
    })

  const link = svg.append("g")
    .attr("stroke-opacity", linkstrokeopacity)
    .attr("stroke-width", linkstrokewidth)
    .attr("stroke-linecap", linkstrokelinecap)
    .selectall("line")
    .data(links)
    .join("line");

  // construct the forces.
  const forcenode = d3.forcemanybody();
  const forcelink = d3.forcelink(links).id(({
    index: i
  }) => n[i]);
  if (nodestrength !== undefined) forcenode.strength(nodestrength);
  if (linkstrength !== undefined) forcelink.strength(linkstrength);
  forcelink.distance(linkdistance)
  const simulation = d3.forcesimulation(nodes)
    .force(link, forcelink)
    .force("charge", forcenode)
    .force("x", d3.forcex())
    .force("y", d3.forcey())
    .on("tick", ticked);

  const node = svg.append("g")
    .attr("stroke", nodestroke)
    .attr("stroke-opacity", nodestrokeopacity)
    .attr("stroke-width", nodestrokewidth)
    .selectall("circle")
    .data(nodes)
    .join("circle")
    .style("fill", "#fff")
    .style("fill", d => `url(#${d.id})`)
    .attr("r", noderadius);

  function ticked() {
    link
      .attr("x1", d => d.source.x)
      .attr("y1", d => d.source.y)
      .attr("x2", d => d.target.x)
      .attr("y2", d => d.target.y);
    node
      .attr("cx", d => d.x)
      .attr("cy", d => d.y);
  }
} // forcegraph

forcegraph({
  nodes,
  links
});
line {
  stroke: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.2.0/d3.js"></script>


Related Query

More Query from same tag