title: Drawing multiple circles using D3
body: <p>I am a newbie of D3 library. I have done some basic tutorial on D3 and now trying to visualize some of data. Let me explain my problem first. I have two set of data one having 50 elements.I bounded this data array with my SVg element to draw 50 circles using the following code .</p>
  
  <pre><code>    var nodes = vis.selectAll("circle").data(sampleData, function (d,i){return i;})
      .enter()
     .append("g");
      nodes.append("circle")
      .attr("cx", function (d,i) {console.log("d"+d +"i"+i);
      Cxs[i]= xRange (d.x);return xRange (d.x); })
      .attr("cy", function (d,i) {Cys[i]= yRange (d.y); return yRange (d.y); })
  </code></pre>
  
  <p>than i also have another data which contain 60 elements, i wish to draw these 60 points as new circles in side on of my already drawn circles. I bounded the new data , however the problem is that it always draw 10 circles (see code below), i understand because it already bind to 50 circles so it adds another 10 circles, that i do not want. any help please.</p>
  
  <pre><code> var nodes = vis.selectAll("circle").data(MdsData)
                     .enter()
                     .append("g");
                     nodes.append("circle")                  
                  .attr("cx", function (d,i) {console.log("Xdd inst No:"+i +"cx"+xRangeN (d.x));return xRangeN (d.x); })
                  .attr("cy", function (d,i) { console.log("Yd inst No:"+i+"cy"+yRangeN (d.y));return yRangeN (d.y); })
                  .attr("r",3)
  </code></pre>