title: Add node specific links to forceSimulation force-directed graph in d3.js
body: <p>I have this force graph. I want to have <em>each circle contain a link to a different page</em>, such that when clicked the viewer is redirected.</p>
  <p>Is there a way to do this?</p>
  <p>Further, it would be nice to have text attached (inside) each node too, but this is much less of a priority.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var numNodes = 12
  var nodes = d3.range(numNodes).map(function(d) {
    return {
      radius: Math.random() * 20 + 40
    }
  })
  
  var simulation = d3.forceSimulation(nodes)
    .force('charge', d3.forceManyBody().strength(4))
    .force('center', d3.forceCenter(400, 250))
    .force('collision', d3.forceCollide().radius(function(d) {
      return d.radius
    }))
    .on('tick', ticked);
  
  function orb() {
    var u = d3.select('svg')
      .selectAll('circle')
      .data(nodes)
  
    u.enter()
      .append('circle')
      .attr('r', function(d) {
        return d.radius
      })
      .merge(u)
      .attr('cx', function(d) {
        return d.x
      })
      .attr('cy', function(d) {
        return d.y
      })
  
    u.exit().remove()
  }
  
  function ticked() {
    orb()
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>circle:hover {
    fill: red;
    stroke: #444;
    stroke-width: 0.5;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.5.0/d3.min.js"&gt;&lt;/script&gt;
  
  &lt;svg width="800" height="800" class=''&gt;
    &lt;g&gt;
    &lt;/g&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>