質問
マイク・ボストックのものを変換しようとしています ズーム可能なツリーマップ Reactコンポーネントに取り込みます。途中までは進んでいますが、データがレンダリングされた DOM に依存する場合にコンポーネント間でデータを受け渡す最適な方法がわかりません。幅)。
ベン・スミスに出会った ブログ React と D3js の混合について。素晴らしいもの。
Bootstrap を使用して CSS スタイルを制御します。相対コンテナ内の絶対位置と最大幅 (100%) を使用して svg 要素を定義しました。
.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 などのツリーマップ ノード属性はパーセントではなく固定値である必要があると仮定します。ウィンドウのサイズ変更イベントを監視する必要があると考え、新しい svg 要素の寸法 ("parseInt(d3.select('.svg-content').style('width'), 10);") を選択し、Reactjs に強制的にサイズ変更を行わせる-render (「React.renderComponent」)。
解決
選択肢は 2 つあります。
現在の高さと幅をツリーマップ レイアウトに与え、高さと幅が変更されるたびにツリーマップを再計算します。または、
デフォルト サイズ (最大の高さと幅は 1、その他はすべてその比率) でツリーマップ レイアウトを計算し、長方形を描画するときに現在の高さと幅を倍率として使用します。
その後、高さまたは幅が変更された場合は、レイアウトを再計算する必要はなく、再描画するだけで済みます。さまざまなコンポーネントを分離しておこうとしているので、それが最も賢明なアプローチのように思えます。また、レイアウト関数を 1 回だけ実行するだけなので、より効率的です。再描画関数内から現在の高さと幅を取得するだけでよく (もちろん svg ノードにアクセスできます)、レイアウト コンポーネントは寸法について何も知る必要がありません。
ああ、怖いです parseInt(d3.select('.svg-content').style('width'), 10);
インラインスタイルのみを返すため、期待どおりにはなりません。計算された幅を取得する必要があります。最後にその方法の例がいくつかあります。 ズームに関するこの長い答え.