更新されたデータ（d3、js）に基づいて長方形のサイズを調整する

Question

私は昨日同じような投稿をしましたが、私の問題が実際に何かについて間違っていたので、それをより正確に説明することができます。

3つの矩形のサイズを新しいデータで更新したいが、データの変更による直接の結果としてサイズを調整するのではなく、親の幅に合わせて保持したい。

ここには以下のようなplnkがあります。

http://plnkr.co/edit/eVfgniBQLbJLiMvAtWLI

この例は、私がデータを変更したい方法を示しています。ここでの問題は、軸の幅が親の幅とは独立して拡大/縮小することです。

私は解決策がこれだと思っていました。

// OLD SOLUTION 
     x: d.y, 
     y: d.x, 
     x0: d.y0 

    // NEW SOLUTION 
     x: (d.y/calcTotal) * width, 
     y: d.x, 
     x0: (d.y0/calcTotal) * width 

これは、各長方形がサイズごとに変更するが、それを維持することを確実にするために、親コンテナの幅によってそれぞれ数回、新しいデータセットの合計額に比べて、各数の割合を算出し、親の幅に対して

ただし、私の新しいソリューションでデータが更新されたときに四角形のサイズが視覚的に変更されないため、残りの機能をここから修正する方法がわかりません。

アドバイスありがとうございます。

おかげ

Answer 1

問題は、作成ブロックでのみ矩形のデータを設定することです。

あなたは以下のような矩形とグループ内のデータを更新する必要があります。

//update the group with new data 
groups = svg.selectAll('g') 
    .data(dataset) 


if (create) { 
    groups 
    .enter() 
    .append('g').attr('class', 'stacked') 
    .style('fill', function(d, i) { 
     return colours(i); 
    }) 
    rects = groups.selectAll('.stackedBar') 
    .data(function(d, i) { 
     return d; 
    }) 

    rects 
    .enter() 
    .append('rect').attr('class', 'stackedBar') 
    .attr('x', function(d) { 
     return xScale(d.x0); 
    }) 

    .attr('height', height) 
    .attr('width', 0); 
} else { 
    .//update the rectangle with new data 
    rects = groups.selectAll('.stackedBar') 
    .data(function(d, i) { 
     return d; 
    }) 
} 
//now do transition. 

作業コードhere

Answer 2

は、私が何かを見逃しているかもしれませんが、あなたは自分のscript.jsにwidth='100%'にwidth=400を変えたらどう？ http://plnkr.co/edit/DKZdjposoN2omC55rM2d?p=preview

次に、data.JSONのデータを変更すると、親コンテナのパーセンテージに基づいて必要な幅が反映されます。