javascript - D3 (v3) resetting a previously animated circle after clicking another one -

i have circles dynamically generated on view different sizes (d3.pack()) . added click event on gets clicked expands. now, want elegantly reset when circle clicked? did reset similar answer d3 - resetting svg object animation

but here's snippet of code

 var objects= [                 { id: '1477', amounts: 7, color: '#ffd800' },                 { id: '1490', amounts: 10, color: '#b65959' },                 { id: '1300', amounts: 90, color: '#ff006e' },                 { id: '4000', amounts: 50, color: '#ffd800' },                 { id: '9000', amounts: 20, color: '#b20101' },                 { id: '1212', amounts: 28, color: '#ff006e' },                 { id: '2323', amounts: 7, color: '#ffd800' }             ]   var width = 700,             height = 800,             color = d3.scale.category20b(),             maxdiameter = 500;          var container = d3.select('.chart')         var svg = container.append('svg')                     .attr('width', maxdiameter * 2)                     .attr('height', maxdiameter)                     .attr('class', 'bubble')          var bubble = d3.layout.pack()                         .sort(null)                         .size([maxdiameter, maxdiameter])                          .value(function (d) { return d.size; })                         .padding(1.5)          var nodes = bubble                     .nodes(processdata(objects))                     .filter(function (d) {                         return !d.children;                     })          var gcircle = svg.append('g')         var circle = gcircle.selectall('circle')                         .data(nodes)                         .enter()                         .append('circle')                         .attr('transform', function (d) {                             return 'translate(' + d.x + ',' + d.y + ')';                         })                         .attr('r', function (d) {                             return d.r;                         })                         .attr('fill', function (d) { return d.color;})                         .attr('class', function (d) { return d.classname; })      // onclick      circle.on('click', function (e, i) {         d3.select(this).transition()               .attr("x", function (d) {                   console.log('d x ' + d.x);                   return d.x;               })               .attr("y", function (d) {                   console.log('d y ' + d.y);                   return d.y;               })               .attr("r", function (d) {                   console.log('d r ' + d.r);                   return d3.select(this).attr('r') == d.r ? (d.r * 100) : d.r;               })               .duration(500);          });     function processdata(data) {             var obj = data;              var newdataset = [];              (var l = 0; l < obj.length; l++) {                 var objindata= obj[l];                 newdataset.push({ name: objindata.id, classname: objindata.id, size: objindata.amounts, color: objindata.color });             }             return { children: newdataset };         } 

before expanding clicked circle, set other circles initial size:

circle.transition()     .duration(500)     .attr('r', function (d) {         return d.r;     }); 

here demo:

 var objects= [                  { id: '1477', amounts: 7, color: '#ffd800' },                  { id: '1490', amounts: 10, color: '#b65959' },                  { id: '1300', amounts: 90, color: '#ff006e' },                  { id: '4000', amounts: 50, color: '#ffd800' },                  { id: '9000', amounts: 20, color: '#b20101' },                  { id: '1212', amounts: 28, color: '#ff006e' },                  { id: '2323', amounts: 7, color: '#ffd800' }              ]     var width = 500,              height = 400,              color = d3.scale.category20b(),              maxdiameter = 500;            var container = d3.select('body')          var svg = container.append('svg')                      .attr('width', maxdiameter * 2)                      .attr('height', maxdiameter)                      .attr('class', 'bubble')            var bubble = d3.layout.pack()                          .sort(null)                          .size([maxdiameter, maxdiameter])                           .value(function (d) { return d.size; })                          .padding(1.5)            var nodes = bubble                      .nodes(processdata(objects))                      .filter(function (d) {                          return !d.children;                      })            var gcircle = svg.append('g')          var circle = gcircle.selectall('circle')                          .data(nodes)                          .enter()                          .append('circle')                          .attr('transform', function (d) {                              return 'translate(' + d.x + ',' + d.y + ')';                          })                          .attr('r', function (d) {                              return d.r;                          })                          .attr('fill', function (d) { return d.color;})                          .attr('class', function (d) { return d.classname; })        // onclick        circle.on('click', function (e, i) {  				circle.transition().duration(500).attr('r', function (d) {                              return d.r;                          })          d3.select(this).transition()                .attr("x", function (d) {                    return d.x;                })                .attr("y", function (d) {                    return d.y;                })                .attr("r", function (d) {                    return d3.select(this).attr('r') == d.r ? (d.r * 2) : d.r;                })                .duration(500);            });      function processdata(data) {              var obj = data;                var newdataset = [];                (var l = 0; l < obj.length; l++) {                  var objindata= obj[l];                  newdataset.push({ name: objindata.id, classname: objindata.id, size: objindata.amounts, color: objindata.color });              }              return { children: newdataset };          }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

ps: instead of expanding r*100, in demo circles expanding r*2.