score:1

Accepted answer

Something like this should do :

d3.select('rect').on('click',function(d){
   d3.select(this)
  .attr('width', changeWidthHere)
  .attr('height', changeHeightHere)
  .text(changeTextHere);
}

var svg = d3.select('body').append('svg').attr('width', 500).attr('height', 500);

var data = [{
value : 1,
text : 'One'
},
{
value : 2,
text : 'Two'
},
{
value : 3,
text : 'Three'
}]

svg.selectAll('rect')
    .data(data)
  .enter().append('rect')
    .attr('x', function(d,i) { d.clicked=false; return 100+100*i; })
    .attr('y', function(d,i) { return 0; })
    .attr('width', function() { return 60; })
    .attr('height', function() { return 60; })
    .attr('fill', function() { return 'red'; })
    .on('click',function(d){
    	d3.select(this)
  			.attr('width', function(f){ return f.clicked ? 60 : 20})
  			.attr('height', function(f){ return f.clicked ? 60 : 20})
        .each(function(d){ console.log(d.clicked);d.clicked = !d.clicked})
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>


Related Query

More Query from same tag