nextAll selector, transform elements after clicked element - d3.js

Question

JSFiddle: http://jsfiddle.net/kKvtJ/2/
Right now the groups are 20px wide. When clicked, I want the selected group to expand to 40px wide, with the groups to the right shifting over 20px more.
Current:
Expected:
Can I can set a transform on all the groups like this? I couldn't figure this out.
var clicked_index = 3; // how to get currently clicked `g` index?
d3.selectAll('g')
.attr('transform',function(d,i){ return 'translate('+(i>clicked_index?40:0)+',0)' });
I have marked what I want to accomplish in the code below, in // pseudocode.
JSFiddle: http://jsfiddle.net/kKvtJ/2/
code
var data = [13, 11, 10, 8, 6];
var width = 200;
var height = 200;
var chart_svg = d3.select("#chart")
.append("svg")
.append("g");
y_scale = d3.scale.linear().domain([0, 15]).range([200, 0]);
h_scale = d3.scale.linear().domain([0, 15]).range([0,200]);
x_scale = d3.scale.linear().domain([0, 10]).range([0, 200]);
var nodes = chart_svg.selectAll('g').data(data);
var nodes_enter = nodes.enter().append('g')
.attr('transform', function (d, i) {
return 'translate(' + (i * 30) + ',0)'
})
.attr('fill', d3.rgb('#3f974e'));
nodes_enter.on('click', function() {
d3.selectAll('line')
.attr('opacity',0);
d3.selectAll('text')
.style('fill','white')
.attr('x',0);
d3.select(this).select('line')
.attr('opacity',1);
d3.select(this).selectAll('text')
.style('fill','black')
.attr('x',40);
// pseudocode
// d3.select(this).nextAll('g')
// .attr('transform','translate(20,0)');
});
nodes_enter.append('rect')
.attr('y', function (d) { return y_scale(d) })
.attr('height', function (d) { return h_scale(d) })
.attr('width', 20);
nodes_enter.append('text')
.text(function (d) { return d })
.attr('y', function (d) { return y_scale(d) + 16 })
.style('fill', 'white');
nodes_enter.append('line')
.attr('x1', 0)
.attr('y1', function(d) { return y_scale(d) })
.attr('x2', 40)
.attr('y2', function(d) { return y_scale(d) })
.attr('stroke-width', 1)
.attr('stroke','black')
.attr('opacity', 0);

Answer 1

You can do this by selecting all the g elements, shifting them if the respective index is larger than the one of the bar you clicked on, and selecting all the rect elements and adjusting the width depending on whether the index is the one you clicked on. Updated jsfiddle here, relevant code below. Note that I assigned the class "bar" to the relevant g elements to be able to distinguish them from the others.
nodes_enter.on('click', function(d, i) {
d3.selectAll("g.bar")
.attr('transform', function (e, j) {
return 'translate(' + (j * 30 + (j > i ? 20 : 0)) + ',0)';
});
d3.selectAll("g.bar > rect")
.attr("width", function(e, j) { return j == i ? 40 : 20; });
});