title: How to move shape background image with the shape in d3
body: <p>I am trying to map out skills and interests of team members in a force-directed graph.</p>
  
  <p>The basic structure is mapped out. Instead of names written next to the circles, I'd like to have the circles contain photos of the persons, if available.</p>
  
  <p>The call to <code>.force('charge', d3.forceManyBody())</code> lets my shapes re-orient them selves during the initialization. This is causing some weird repeat effect on the background-image, since this is not moving with the shape.</p>
  
  <p>Here is the complete code, which is also available as a <a href="https://jsfiddle.net/k20mevrL/1/" rel="nofollow noreferrer">Fiddle</a>:</p>
  
  <pre><code>var width = 640,
      height = 480;
  
      var team = [
          {name: "User 1", skills: ["C#", "Typescript", ".Net", "ArcGIS"]},
          {name: "User 2", skills: ["Project Management", "Candy Crush", ".Net"]},
          {name: "User 3", skills: ["C#", "Javascript", ".Net"]},
          {name: "User 4", skills: ["Consulting", "Release Management", "Xml"]},
          {name: "User 5", skills: ["Consulting", "Powerpoint"]},
          {name: "User 6", skills: ["Cold Fusion", "ArcGIS", "SQL Server"]},
  
      ];
  
      var links = [];
      team.forEach((member, idx) =&gt; {
          member.skills.forEach(skill =&gt; {
              //foreach skill iterate over each member and find fitting matches
            team.forEach((memberToCompare, idx2) =&gt; {
                var compareIndex = memberToCompare.skills.indexOf(skill)
              //   console.log(member.name, idx, skill, "---",memberToCompare.name, memberToCompare.skills[compareIndex], idx2, compareIndex);
              if(compareIndex !== -1 &amp;&amp; idx !== idx2) {
                  links.push({source: idx, target: idx2, value: skill})
              }
            })
          })
        })
  
  var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height);
  
  svg.append("g").attr("class", "nodes");
  svg.append("g").attr("class", "links");
  
  var defs = svg.append('svg:defs');
  
  defs.append("svg:pattern")
      .attr("id", "grump_avatar")
      .attr("width", 40)
      .attr("height", 40)
      .attr("patternUnits", "userSpaceOnUse")
      .append("svg:image")
      .attr("xlink:href", 'http://placekitten.com/g/40/40')
      .attr("width", 40)
      .attr("height", 40);
  
  var force = d3.forceSimulation(team)
      .force("link", d3.forceLink().links(links)
          .distance(150)
      // .strength(-1)
      )
      .force('charge', d3.forceManyBody())
      .force('center', d3.forceCenter(width / 2, height / 2))
      //.force('collision', d3.forceCollide().radius((d) =&gt; { return d.radius; }))
      .on('tick', ticked);
  
  
  
  function ticked() {
      updateLinks();
      var u = d3.select('svg')
          .selectAll('circle')
          .data(team)
  
      u.enter()
          .append('circle')
          .attr('r', 20)
          .merge(u)
          .attr('cx', function (d) {
              return d.x
          })
          .attr('cy', function (d) {
              return d.y
          })
          .style("fill", "#fff")
          .style("fill", "url(#grump_avatar)");
  
      u.exit().remove()
  }
  
  function updateLinks() {
      var u = d3.selectAll(".links")
          .selectAll("path")
          .data(links);
  
      u.enter()
          .append("path")
          .merge(u)
          .attr("d", (d) =&gt; {
              var dx = d.target.x - d.source.x,
                  dy = d.target.y - d.source.y,
                  dr = Math.sqrt(dx * dx + dy * dy);
              return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
          })
          .attr("class", "link");
  
      u.exit().remove();
  }
  </code></pre>
  
  <p>How can I make the background-image stick to the shape itself, so it moves with the shape containing it?</p>