업데이트 된 데이터에 따라 사각형 크기 조정

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

문제는 작성 블록에서만 직사각형의 데이터를 설정한다는 것입니다.

당신은 RECT의 데이터를 업데이트해야

및 그룹 아래 같은 :

//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의 데이터를 변경하면 원하는대로 상위 컨테이너의 비율에 따라 너비가 반영됩니다.