プロジェクトの場合、基になるデータをまったく変更せずに、ビジュアライゼーションの階層データレイアウトをインタラクティブに変更する必要があります。それらを切り替えることができるレイアウトは、ツリー、クラスター、放射状ツリー、および放射状クラスターである必要があります。また、トランジションはアニメーションであることが望ましいです。
D3
を使えば比較的簡単な作業だと思いました。始めましたが、翻訳やローテーション、データバインディングなどで迷子になりましたので、よろしくお願いします。また、おそらく私はD3の精神に反することをしているのでしょう。これは、クリーンな解決策を探しているので悪いことです。
jsfidle をまとめましたが、これは出発点にすぎず、ラジオボタン、便利な小さなデータセット、初期クラスターレイアウトが追加されています。これは、これを確認したい人を支援するためです。前もって感謝します!
更新:
リンクだけに集中したかったので、他の要素を一時的に無効にしました。 @AmeliaBRメソッドに基づいて、次のアニメーションが取得されます。
これが 更新されたjsfiddle です。
更新2:
今円で:(私の色の選択をすみません)
{Doom-duba-Doom}
これが もう1つ更新されたjsfiddle です。
すべてのレイアウトがリンクパス、サークルノード、テキストラベルの全体的な構造が同じである限り、なぜそれほど難しいのかわかりません。
リンクパスを含むすべてのオブジェクトに、レイアウト関数によって作成されたデータ属性から独立した適切なデータキーがあることを確認してください。次に、遷移ごとに、適切なレイアウト関数の結果でデータを更新し、そのレイアウトを描画します。
ここに放射状木への移行を実装しました: 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つを、ノードリンク構造を使用しないパーティション、ツリーマップ、またはその他のレイアウトにしたい場合は、さらに複雑になります...