0

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

1 に答える 1

2

これを行うには、すべてのg要素を選択し、それぞれのインデックスがクリックしたバーのインデックスよりも大きい場合はそれらをシフトし、すべてのrect要素を選択して、インデックスがクリックしたものであるかどうかに応じて幅を調整します。ここでjsfiddleを更新し、以下の関連コード。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; });
});
于 2013-07-02T15:12:04.920 に答える