nextAll選擇器，變換元素點擊元件

Question

的jsfiddle後：http://jsfiddle.net/kKvtJ/2/

---

眼下基團是20像素寬。點擊後，我希望選定的組擴展到40px寬，向右移動的組多於20px。

電流：

預計：

---

可以設定相關的所有組這樣的transform？我無法弄清楚這一點。

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

---

我已經打上我想在下面的代碼來完成，在// pseudocode什麼。

的jsfiddle：http://jsfiddle.net/kKvtJ/2/

代碼

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

您可以通過選擇所有g元素，轉移他們，如果相應的指數比你點擊欄的一個更大的做到這一點打開並選擇所有rect元素並根據索引是否是您單擊的元素來調整寬度。更新了jsfiddle here，下面的相關代碼。請注意，我將類「bar」分配給相關的g元素，以便能夠將它們與其他元素區分開來。

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