title: d3.js onclick event uses the value of variable at time of click instead of at time of drawing
body: <p>I'm drawing a set of circles on an SVG Container using d3.js.
  I have an <code>eventList</code>. For each element in this list, I draw a circle. Here is how I do it. It works:</p>
  
  <pre><code>var eventList = [
      Object {stateId: 5},
      Object {stateId: 6},
      Object {stateId: 7},
  ];
  for (var i = 0; i &lt;= eventList.length-1; i++) {
    var currEvent = eventList[i];
  
    var myCircle = self.svgContainer.append("circle")
      .attr("cx", i * 100)
      .attr("cy", i * 100)
      .attr("r", 5)
      .attr("stroke-width", 0)
      .attr("fill", "red");
  }
  </code></pre>
  
  <p>I'm now trying to add on-click behavior to each of these circles. I want clicking on each circle to take me to a specific URL based on data found in the eventList. Here's what I'm adding into the loop above:</p>
  
  <pre><code>    myCircle.on({
          "click":  function() {
            console.log("Hello! currEvent.stateId=", currEvent.stateId.toString());
            console.log("currEvent = ", currEvent);
            $state.go('myState', {
                'stateId': currEvent.stateId
              }
            );
          }
        }
      );
  </code></pre>
  
  <p>By my understanding, this should work. But it doesn't. What it does is run the onclick code when I click on any of the circles. At that point it prints out the value of <code>currentEvent.stateId</code> -- <strong>which is always the last one!</strong>. So clicking on every circle simply takes me to the same URL - which should only happen when clicking the last circle.</p>
  
  <p>How do I make it so the onclick code uses the value of currentEvent at the time when that circle was drawn, rather than when the click is actually fired? This is a big issue for me.</p>