d3.js - nextAll 选择器，点击元素后变换元素

Question

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

---

现在这些组是 20px 宽。单击时，我希望所选组扩展为 40 像素宽，右侧的组移动超过 20 像素。

当前的：

预期的：

---

我可以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 ，相关代码如下。请注意，我将类“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; });
});