1

これは、d3.js を使用して折りたたみ可能なツリー レイアウトを作成するという私の取り組みの続きです。

フラット json から（マルチレベルの）flare.json データ形式を生成する

レイアウトは次のようになります: ( http://bl.ocks.org/mbostock/raw/4339083/ ) 約 3k ノード、一部のノードの深さは約 25 です。設定する必要があるキャンバスの現在のサイズは、幅 8000px、幅 8000px です。レンダリングされるツリー レベルの数が 2 または 3 の場合、すべてのノードが表示されるようにするための高さは適切ではありません。 (jsonファイル)が選択されています。

そのため、画面に表示されるノードの位置/ノード数に対してキャンバスのサイズを変更できるかどうか疑問に思っていました。このようにして、コードはより体系的で適応性が高くなります。

これを見た：

子ノードの数に基づいて d3 ツリー レイアウトのサイズを動的に変更します

ただし、これによりツリーのサイズが変更されます。これは、約 3k ノードのツリーの場合を想像すると、読みにくく、理解しにくくなります。

これは d3.js とは関係ないかもしれませんが、問題を説明するためにタグを付け、同様の状態に直面した可能性のある d3 の専門家も連れてきました。

また、実際のデータよりも少ない数のノードをレンダリングするために、私の基準に基づいて有益でないノードを除外しようとしています。(ツリーが大きいとパフォーマンスの問題が発生することはわかっています)。どんな助けでも大歓迎です。

注: キャンバスと言うときは、「キャンバス」ではなく、木が描かれている領域を意味します。専門用語がよくわからないので、読み飛ばしてください。

4

2 に答える 2

2

私は同様の問題に直面していましたが、今では解決策を見つけました。このリンクで確認してください。D3 折りたたみ可能なツリー、ノードのマージの問題

于 2015-11-19T13:15:23.747 に答える
2

これが誰かに役立つことを願っています。

私が構築していたもののベースとしてフレア ツリー コードを使用しても同様の問題に直面しましたが、提案されたリンクはノード構造の多くの差異を説明していないようでした 動的な数のノードと構造化を使用して表示する多くのツリーがあります。この解決策は私のために働いた：

高さについて: ノードごとの変換オフセットを観察した後、dx (vs dy、ツリーが反転されているため) はルート ノードからのオフセットであり、ルートの上のノードは負になり、下のノードは正になることがわかりました。そのため、ノードが追加されるたびに両方向の最大オフセットを「計算」し、その情報を使用して、キャンバスの高さとビューの移動 (ルートの開始点) を調整しました。

幅の場合: 最大 d.depth * (コードが使用する y の長さの正規化) + マージン

let aboveBount = 0
let belowBound = 0
let maxDepth = 0


nodeEnter.each( (d) => {
  if( Math.sign(d.x) === -1 &&  d.x < boundAbove) {
    boundAbove = d.x
  } 
  if( Math.sign(d.x) === 1 &&  d.x > boundBelow) {
    boundBelow = d.x
  }
  
  if( d.depth > maxDepth){
    maxDepth = d.depth
  }

})

const newHeight = boundBelow + Math.abs(boundAbove) + nodeHeight*2 + margin.top*2


svg.style('height', newHeight)
svg.style('width'. maxDepth*180 + margin.left*2) 
//180 was the amount set to normailze path length

svg.attr('transform', `translate(${margin.left}, ${Math.abs(boundAbove) + margin.top})`)

それでは、よろしくお願いします。コーディングをお楽しみください。

于 2018-04-21T00:10:29.900 に答える