title: Object Consistency when updating shape attributes
body: <p>I'm very new to D3 and Javascript, so forgive me if my code looks a little ugly or poorly organized. </p>
  
  <p>I have been working on a plot that utilizes 3 metrics: an x and y axis, and the radius of the circle as a data metric for the plot. The data I am reading is a two dimensional array, with each row being a different metric, and each column being a new data point. I have successfully implemented a method to change the radius of the circle dynamically by picking a different metric from a drop box, but this was after struggling endlessly with a very particular issue - my data was being assigned to the wrong circle! </p>
  
  <p>When I initially create my circles, I first use sort() to sort the circles in descending order from the default radius metric (in my code, its "impactcpu"). This was done to fix an issue where larger circles that were drawn after smaller circles were obstructing the smaller circles, so I wanted to "paint" the largest circles first.</p>
  
  <p>I was able to get past this issue by first sorting my calculated data array before assignign it to the circles, which preserved the default order. However, I am now trying to do something similar with my X and Y axis. While my dropdown menu is correctly assigning metric values to circles, it is doing so to the WRONG circles. I have yet to figure out a solution to this issue, as re-sorting the array before assignign is like I was doing for the radius isn't working (which I expected). Are there any suggestions as to how I could ensure the right data point is assigned to the correct circle? Preferably one that wouldn't require an overhaul of the rest of my code :)</p>
  
  <p>Please take a look at my jsfiddle for an example of my above situation:</p>
  
  <p><a href="http://jsfiddle.net/kingernest/YDQR4/3/" rel="nofollow">http://jsfiddle.net/kingernest/YDQR4/3/</a></p>
  
  <p>Example of how I am creating my circles initially:</p>
  
  <pre><code>var circles = svg.selectAll("circle")
      .data(dataset, function(d) { return d.id })
      .enter()    
      .append("circle")
      .sort(function(a, b){    //Sort by radius size, helps reduce obstruction of circles
          return d3.descending(a[14], b[14]);
      })
      .attr("cx", function(d){ //x axis is Req IO, col index 9
          return xScale(d[9]);
      })
      .attr("cy", function(d){ //y axis is Req CPU, col index 8
          return yScale(d[8]);
      })
      .attr("r", function(d){ //radius is based off Impact CPU, col 14
  
          console.log("Rad: " + d[14])
          return d[14] * 1.5;
      })
      .attr("class", "dataCircle")
  </code></pre>
  
  <p>etc</p>
  
  <p>How I am currently altering my radius:</p>
  
  <pre><code>function changeRad() {
       console.log(this.value); 
       var myRadData = [];
       var index = metricHash[this.value];
       var weight; //to adjust data to fit appropriately in graph
      switch(this.value) 
      {
          case "impactcpu": 
              weight = 1.5;
              break;
          case "spool": 
              weight = .0000001;    //spool is normally a very large value
              break;
          case "pji": 
              weight = 8;
              break;
          case "unnecio": 
              weight = 12;
              break;
          case "duration": 
              weight = .0002;
              break;
          default: alert("Invalid value: " + this.value); 
              break;
      }
       for(var i=0; i &lt; dataset.length; i++)
       {         
           console.log(dataset[i][index]);
           myRadData.push(dataset[i][index] * weight);
       }
  
      myRadData.sort(function(a,b){return b-a});
  
      d3.selectAll("circle")
          .data(myRadData)
          .transition().duration(500)
          .attr("r", function(d){
              return d;
          });
  
      circles.data(dataset); //reassign old data set (with all data values)
  }
  </code></pre>