nextAll选择器，单击元素后转换元素

Question

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

---

现在这些群体的宽度是20px。单击时，我希望所选组扩展到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; });
});