1

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 .

    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); })

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.

 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)
Nhqazi
  • 732
  • 3
  • 12
  • 30
  • 1
    Have you seen [this tutorial](http://bost.ocks.org/mike/circles/)? – Lars Kotthoff Nov 17 '15 at 17:41
  • Yeah I have read this tutorial.Please note i wish to add another 60 circles, i want to keep my already drawn circle. following that tutorial it seems it will add another 10 circles however i wish to draw 60 more. – Nhqazi Nov 17 '15 at 18:06
  • You haven't understood the tutorial. It tells you about D3's data binding, which is what you need to understand here. Please have another look. – Lars Kotthoff Nov 17 '15 at 18:20
  • i read it again, see the section Entering Elements: it re-bonds with new array of four elements and as result four circles are drawn, the last three circles were redrawn with new values to new binded array.However i wish that in addition to last three circles it also should draw four new circles. the author has suggested to use 'enter' method, which i also have used please see my code above. – Nhqazi Nov 17 '15 at 19:28
  • Have a look at the last bit of the tutorial about the key function. You need to specify a different key function. – Lars Kotthoff Nov 17 '15 at 19:33
  • I really need your suggestion here, as i have used the key function , i want to reinitialize the index of data back to zero so that it reads from the beginning in new binded array, please see the code , but it does not work for me data(sampleData, function (d,i){return i;} – Nhqazi Nov 17 '15 at 19:42
  • You cannot "reinitialize" the index or anything like that and the key function you've specified is the default. If you have different data, you can use `function(d) { return d; }`. – Lars Kotthoff Nov 17 '15 at 19:44
  • thanks, I used the same key function but it causes to draw only one element , it does not go beyond one,please note MdsData is my data that i used as binding array. it is how i have initialized it, for(i=0;i – Nhqazi Nov 17 '15 at 20:31
  • If you simply want two sets of circles without any relation between them, append them to different elements. – Lars Kotthoff Nov 17 '15 at 21:03
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/95408/discussion-between-nhqazi-and-lars-kotthoff). – Nhqazi Nov 18 '15 at 06:07
  • Finally i solved this problem. I rather used unbounded data array for my second circles .it seems the data bounding ability of the D3 does not give much control to user. Any way thanks for your time and help. – Nhqazi Nov 18 '15 at 12:33

0 Answers0