title: Dragging one of multiple circles
body: <p>I am playing around with a great tutorial from here <a href="http://ssun.azurewebsites.net/creating-a-draggable-object-in-d3/" rel="nofollow noreferrer">http://ssun.azurewebsites.net/creating-a-draggable-object-in-d3/</a>. I am having a problem understanding what is passed through functions such as call. For example, how can I choose one of two circles. The modified code is below:</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
      &lt;html&gt;
        &lt;head&gt;
          &lt;!-- Load D3 from site --&gt;
          &lt;script src="http://d3js.org/d3.v3.min.js" charset="utf-8"&gt;&lt;/script&gt;
  
      &lt;!-- End CSS (Styling) --&gt;
      &lt;/head&gt;
        &lt;body&gt;
  
      &lt;h3&gt;&lt;/h3&gt;
  
    &lt;!-- Begin D3 Javascript --&gt;
    &lt;script type="text/javascript"&gt;
  
      var boxWidth = 600;  
      var boxHeight = 400;
  
      var box = d3.select('body')  
              .append('svg')
              .attr('class', 'box')
              .attr('width', boxWidth)
              .attr('height', boxHeight);
  
      var drag = d3.behavior.drag()  
               .on('dragstart', function() { circle.style('fill', 'red'); })
               .on('drag', function() { circle.attr('cx', d3.event.x)
                                              .attr('cy', d3.event.y); })
               .on('dragend', function() { circle.style('fill', 'black'); });
  
  
       var circle = box.selectAll('.draggableCircle')  
                  .data([{ x: (boxWidth / 3), y: (boxHeight / 3), r: 25 },{ x: (boxWidth / 2), y: (boxHeight / 2), r: 25 }])
                  .enter()
                  .append('circle')
                  .attr('class', 'draggableCircle')
                  .attr('cx', function(d) { return d.x; })
                  .attr('cy', function(d) { return d.y; })
                  .attr('r', function(d) { return d.r; })
                  .call(drag)
                  .style('fill', 'black');
  
    &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>As you can see, only one is selected and the other disappears. How do I reference a specific circle? When writing anonymous functions for call, how do I discover what arguments they pass?</p>
  
  <p>Thank you all in advance!</p>