title: D3 adding force to single node
body: <p>I have made a grouped bubble chart using D3's force layout to create a force towards the middle, like so:</p>
  
  <pre><code>  var forceStrength = 0.03;
    var center = { x: widthBubbles / 2, y: heightBubbles / 2 };
  
    var simulation = d3.forceSimulation()
       .velocityDecay(0.2)
       .force('x', d3.forceX().strength(forceStrength).x(center.x))
       .force('y', d3.forceY().strength(forceStrength).y(center.y))
       .force('charge', d3.forceManyBody().strength(charge))
       .on('tick', ticked);
  
    function charge(d) {
      return -forceStrength * Math.pow(d.r, 2.0);
    }
  
    function ticked() {
      bubbles
        .attr('cx', function (d) { return d.x; })
        .attr('cy', function (d) { return d.y; });
    }
  </code></pre>
  
  <p>My chart looks something similar to this: <a href="http://vallandingham.me/bubble_chart_v4/" rel="nofollow noreferrer">Gates Foundation Educational Spending</a></p>
  
  <p>I want to be able to apply a force on a single node when it is clicked, so that the clicked nodes will move to another area. In the documentation of D3 there is something called "positioning forces", which according to the documentation is intended to be used for multiple nodes:</p>
  
  <blockquote>
    <p>While these forces can be used to position individual nodes, they are intended primarily for global forces that apply to all (or most) nodes.</p>
  </blockquote>
  
  <p>So my question is if there is a way to apply forces to singles nodes in D3. </p>