7

現在、d3.js のギャラリー ツリーマップを試しています。

http://bl.ocks.org/4063582

今、ツリーマップにすべてのアイテムを正方形でレンダリングできるかどうか疑問に思っています。長方形をレンダリングすることしかできません。使用しようとし.mode("squarify");ましたが、必要なレイアウトになりません。使用可能なすべてのスペースを使用しないことは問題ではありません。正方形をレンダリングしたいだけです。

4

2 に答える 2

9

平方化されたツリーマップ： http：//www.win.tue.nl/~vanwijk/stm.pdf 。問題を徹底的に調べたように見え、ソリューションの擬似コードが含まれています。

要約。ディレクトリ構造や組織構造などの階層情報を視覚化するためのツリーマップメソッドの拡張機能を紹介します。標準のツリーマップ方法では、多くの場合、薄くて細長い長方形が得られます。その結果、長方形を比較して選択することは困難です。長方形が正方形に近いレイアウトを生成するための新しい方法が提示されます。構造の視覚化を強化するために、関連するノードのグループの周りに影付きのフレームが使用されます

追加リソース

または、ここで提案されているように、データに基づいて独自の出力を作成することもできます。jQueryを使用して、divを使用してJSONツリーをネストされたHTMLとしてレンダリングする方法

二分化されたアルゴリズムのいくつかの改善： http：//incise.org/d3-binary-tree-treemap.html

階層のスペースに制約のある視覚化のためのツリーマップは、長方形の比率を1に減らすことを目的とした、さまざまなツリーマップアルゴリズムの履歴を示しています。いくつかの論文が役立つ場合があります。

このページでは、さまざまなツリーマップアルゴリズムの詳細についても説明します。

データによっては、長方形のアスペクト比が大きく異なるため、比較が難しくなります。ほぼ正方形の長方形と同じ面積の細長い長方形は、見た目が大きく異なります。そのため、Bruls、Huizing、およびvanWijkはSquarifiedTreemapsを開発しました。これは、レベル内のノードの配置を最適化して、ノードを可能な限り正方形にします。これは静的ツリーマップを読みやすくするための優れたアイデアですが、ツリーマップを使用して時間の経過に伴う開発を表示すると問題が発生します。 ShneidermanとWattenbergによって開発されたOrderedTreemapLayoutsは、ノードを可能な限り正方形に保ちながら要素の順序を維持することでこの問題を解決し、非常に安定したレイアウトを生成します。

結論

ウィキペディアのエントリで簡単に読むと、厳密に正方形のツリーマップを実現するのが難しい理由がわかります。強調が追加されました。

ツリーマップを作成するには、タイリングアルゴリズム、つまり、長方形を指定された領域のサブ長方形に分割する方法を定義する必要があります。理想的には、ツリーマップアルゴリズムは、アスペクト比が1に近い長方形を作成し、さらに入力データの順序をある程度保持し、基になるデータの変更を反映するように変更します。 残念ながら、これらのプロパティには反比例の関係があります。アスペクト比が最適化されると、配置の順序は予測しにくくなります。次数が安定すると、アスペクト比が低下します。

このトピックをさらに調査した後、厳密に正方形でツリーマップを取得することは簡単ではないように見えるというLarsKotthoffに同意します。少なくとも、既存の実装されたツリーマップアルゴリズムに基づいていません。これを回避する最も簡単な方法は、独自のコード（JSおよびCSS）を作成して、ネストされたdivsまたはlisを生成し、目的の最終的なツリーマップの外観を実現することです。

補遺

  • http://www.koalastothemax.com/-このデモはネストされた円をレンダリングしますが、それらがすべて正方形内にあることは明らかです。多少の作業が必要になる場合がありますが、コアラからMaxコードを使用して目的の結果を達成できる可能性があります。

    ネストされたサークル

于 2013-01-30T16:48:56.427 に答える
1

残念ながら、数学的な理由から、ツリーマップですべてのアイテムを四角形でレンダリングすることはできません。

ここでは、反例を示します。処理の最後に、次の表面積を持つ 4 つのカテゴリ (A、B、C、D) になるとします。

A=2
B=2
C=2
D=1

それらに与える位置に関係なく、最終的なツリーマップを正方形または長方形にすることは不可能です。

考えてみてください: 次の各パターンでは、常に角が欠けています。

AB     AC    AD    BA    BC   BD   CA   CB   CD   DA  DB  DC 
CD     BD    BC    CD    AD   AC   BD   AD   AB   CB  AC  AB  ..there are more

正方形の 1 つが表面積 = 1 であるためです。

したがって、これはすべての正方形を持つことはできません

その論文から、JSuarが述べたように、論文で説明されているアルゴリズムを実装して、最適化されたほぼ二乗表現があることがわかります。

しかし、これは概算です。

本当に正方形だけが必要な場合、できることは次のとおりだと思います。

  1. たとえばhttp://bl.ocks.org/4063530を使用して視覚化を変更します

  2. 次のように行 12 を変更する treemap.js コードをハックします。

    比率 = 1;

ただし、この後者の場合、空の空白やその他の誤動作が発生する可能性があります。

于 2013-01-31T23:01:47.213 に答える