D3js 트리 맵이있는 Reactj

Question

Mike Bostock의 zoomable treemap을 React 구성 요소로 변환하려고합니다. 방법의 한 부분이지만, 데이터가 렌더링 된 DOM (즉 너비)에 따라 달라질 때 구성 요소간에 데이터를 전달하는 가장 좋은 방법은 확실하지 않습니다.

벤 스미스 (Ben Smith)의 blog에서 React와 D3js의 혼합에 대해 설명했습니다. 좋은 물건.

CSS 스타일링을 제어하기 위해 부트 스트랩 사용하기.

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

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

그래서 화면으로서 SVG 요소 변화의 폭이 리사이즈 (기본적으로이 blog 등) 상대 콘테이너 내의 절대 위치와 최대 폭 (100 %)으로 SVG 요소를 정의 하였다. x, y, dx, dy와 같은 트리 맵 노드 속성은 프로 세스가 아닌 값을 고정해야한다고 가정합니다. 윈도우의 크기 조정 이벤트를보고 새 svg 요소 치수 ("parseInt (d3.select ('. svg-content'). style ('width'), 10);")를 선택하고 Reactjs를 다시 호출해야합니다. -render ("React.renderComponent").

Answer 1

당신은 두 가지 선택이 있습니다

• 는 트리 맵 레이아웃 현재 높이와 너비를주고, 매번에게 트리 맵을 높이와 폭의 변화를 다시 계산을; 또는,

• 기본 크기 (최대 높이와 ​​너비는 1이되고 다른 모든 것은 그 비율)로 트리 맵 레이아웃을 계산하고 사각형을 그릴 때 스케일 요소로 현재 높이와 너비를 사용하십시오.

그런 다음 높이 또는 너비가 변경되면 다시 그리기 만하고 레이아웃을 다시 계산하지 않아도됩니다. 다른 구성 요소를 별도로 유지하려고하기 때문에 가장 합리적인 방법 인 것 같습니다. 또한 레이아웃 기능을 한 번만 실행하기 때문에 더 효율적입니다. 다시 그리기 기능 (현재 svg 노드에 액세스 할 수 있음)에서 현재 높이와 너비를 가져올 수 있으며 레이아웃 구성 요소는 치수에 대해 알 필요가 없습니다.

오, 나는 두려워합니다. parseInt(d3.select('.svg-content').style('width'), 10);은 당신이 바라는대로하지 않을 것입니다. 그것은 인라인 스타일만을 반환합니다. 계산 된 너비를 잡아야합니다. this long answer on zooming 끝에이를 수행하는 방법에 대한 몇 가지 예가 있습니다.