Reactjs と D3js ツリーマップ

StackOverflow https://stackoverflow.com//questions/22053669

  •  21-12-2019
  •  | 
  •  

質問

マイク・ボストックのものを変換しようとしています ズーム可能なツリーマップ 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); インラインスタイルのみを返すため、期待どおりにはなりません。計算された幅を取得する必要があります。最後にその方法の例がいくつかあります。 ズームに関するこの長い答え.

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top