web-dev-qa-db-ja.com

ツリー、クラスター、放射状ツリー、および放射状クラスターレイアウト間のスムーズな移行

プロジェクトの場合、基になるデータをまったく変更せずに、ビジュアライゼーションの階層データレイアウトをインタラクティブに変更する必要があります。それらを切り替えることができるレイアウトは、ツリー、クラスター、放射状ツリー、および放射状クラスターである必要があります。また、トランジションはアニメーションであることが望ましいです。

D3を使えば比較的簡単な作業だと思いました。始めましたが、翻訳やローテーション、データバインディングなどで迷子になりましたので、よろしくお願いします。また、おそらく私はD3の精神に反することをしているのでしょう。これは、クリーンな解決策を探しているので悪いことです。

jsfidle をまとめましたが、これは出発点にすぎず、ラジオボタン、便利な小さなデータセット、初期クラスターレイアウトが追加されています。これは、これを確認したい人を支援するためです。前もって感謝します！

更新：

リンクだけに集中したかったので、他の要素を一時的に無効にしました。 @AmeliaBRメソッドに基づいて、次のアニメーションが取得されます。

enter image description here

これが 更新されたjsfiddle です。

更新2：

今円で:(私の色の選択をすみません）

{Doom-duba-Doom}

enter image description here

これが もう1つ更新されたjsfiddle です。

d3.jshierarchyhierarchical-datadendrogram
21
VividD

コメントするのに十分な評判がありません...だから、私はこの小さな貢献を疑似回答として与えているだけです。これを見た後 post 、そして遷移がいかに単純であるかについての@VividDの完璧なコメントに基づいて、私は単にこの fiddle の変換にTreeVerticalオプションを追加しました。

追加は単にこれです：

var diagonalVertical = d3.svg.diagonal()
    .projection(function (d) { 
        return [d.x, d.y]; 
    });

とにかく、私はこの非常に教育的な相互作用をブックマークしました。

5
FernOfTheAndes

すべてのレイアウトがリンクパス、サークルノード、テキストラベルの全体的な構造が同じである限り、なぜそれほど難しいのかわかりません。

リンクパスを含むすべてのオブジェクトに、レイアウト関数によって作成されたデータ属性から独立した適切なデータキーがあることを確認してください。次に、遷移ごとに、適切なレイアウト関数の結果でデータを更新し、そのレイアウトを描画します。

ここに放射状木への移行を実装しました： http://jsfiddle.net/YV2XX/5/

キーコード：

//Radial Tree layout//
var diameter = 500;
var radialTree = d3.layout.tree()
    .size([360, diameter / 2 ])
    .separation(function(a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; });
var radialDiagonal = d3.svg.diagonal.radial()
    .projection(function(d) { return [d.y, d.x / 180 * Math.PI]; });
function transitionToRadialTree() {
  var nodes = radialTree.nodes(root), //recalculate layout
      links = radialTree.links(nodes);

    svg.transition().duration(1500)
       .attr("transform", "translate(" + (diameter/2)
                 + "," + (diameter/2) + ")");
             //set appropriate translation (Origin in middle of svg)

    link.data(links, function(d){
              return d.source.name + d.target.name;})
      .transition().duration(1500)
      .attr("d", radialDiagonal); //get the new radial path

  node.data(nodes, function(d){
              return d.name ;})
      .transition().duration(1500)
      .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; }) 

  node.select("circle")
      .transition().duration(1500)
      .attr("r", 4.5);

  node.select("text")
      .transition().duration(1500)
      .attr("dy", ".31em")
      .attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
      .attr("transform", function(d) { return d.x < 180 ? "translate(8)" : "rotate(180)translate(-8)"; });
};

レイアウトコードはすべて http://bl.ocks.org/mbostock/4063550 からのもので、初期化ではなく更新に変更しました。

また、rootの変数宣言をデータ読み取りメソッドの外に移動したため、遷移関数から再度アクセスできることに注意してください。

レイアウトにはまだ多少の調整が必要ですが、アイデアは得られます。

ここで、トランジションの1つを、ノードリンク構造を使用しないパーティション、ツリーマップ、またはその他のレイアウトにしたい場合は、さらに複雑になります...

11
AmeliaBR