Reactjs 와 D3js 트리맵

Question

변환하려고 마이크 bostock 는's zoomable 트리맵 으로 반응하는 요소를 사용합니다.방법의 일부이지만 확인에 대한 최고의 방법을 통과하는 주위 사이에 데이터를 요소를 사용할 때는 데이터에 따라 달라 렌더링 DOM(i.e폭).

를 통해 온 벤 스미스 블로그 혼합에 대해 반응 D3js.좋은 물건입니다.

를 사용하여 부트스트랩을 제어하 CSS 스타일입니다.정의된 svg 요소로 절대적인 위치와 최대 폭(100%)내에 상대적인 컨테이너:

 .svg-container {
   position: relative;
   padding-bottom: 30%;
   overflow: hidden;
   }

 .svg-content {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
 } 

그래서 폭 svg 요소 변경으로 화면 크기가 조정됩니다.다고 가정하면 다루고 노드의 속성,x,y,dx,dy 을 고정 값지 procents.생각을 볼 수 있는 창의 크기를 조절 이벤트를 선택,오프로그램 요소 크기("parseInt(d3.선택하('.svg-콘텐츠').타(폭),10);")및 강 Reactjs to re-render("반응합니다.renderComponent").

Answer 1

두 가지 중에서 선택할 수 있습니다.

• 제공의 현재 높이와 폭을 트리 맵 레이아웃,그리고 다시 계산 트리맵 모든 시간에 높이 및 너비 변화거나,

• 계산 트리 맵 레이아웃과의 기본 크기(최대 높이와 폭 1,모든 다른 비율)을 사용하고,현재 높이와 폭으로 확장 요인을 그리면 사각형.

그 때,높이거나 폭 변경해야만 다시 그리기,다시 계산하지 않습니다.이후신을 보호하기 위해 노력하고 다른 구성 요소를 분리 보이는 가장 현명한 방법이 아니다.그것은 또한 단지 더 많은 효율적인 때문에,당신은 단지 실행하는 레이아웃 기능을 한다.할 수 있습을 잡아의 현재 높이 및 너비 내에서의 다시 그리기 기능(는 것입니다 물론 액세스할 수 있 svg 노드)과 레이아웃을 구성 요소는 알고 있을 필요가 없고 아무것도에 대한 차원입니다.

아,그리고 나는 두려워 parseInt(d3.select('.svg-content').style('width'), 10); 지 않을 것이 무엇이 당신을 희망,그만 반환합니다 인라인 스타일입니다.당신을 잡기 위해 필요한 계산 폭입니다.거기에 몇 가지 예는 어떻게 그것의 끝에 이 장에 대한 답변을 확대.