2015-11-01 5 views
5

私はD3 sankeyでノードを注文しようとしています。大きな値を持つノードをより上に描画したい。d3 sankeyダイアグラムのノードを注文する

これは関連するコード(based on d3 noob's code)のスニペットで、D3の組み込みソート機能を使用して私が望むものを実現しようとしています。結果は私が期待するものではありません。

sankey.jsを調べると、プラグインがどのようにノードを注文するのかが完全にわかりません。トピックに関するアドバイスをいただければ幸いです。

sankey.jsファイル内resolveCollisions()関数から次の行が変化からノードの順序を停止する取り外し
//set up graph in same style as original example but empty 
    graph = {"nodes" : [], "links" : []}; 

    data.forEach(function (d) { 
     graph.nodes.push({ "name": d.source }); 
     graph.nodes.push({ "name": d.target }); 
     graph.links.push({ "source": d.source, 
      "target": d.target, 
      "value": +d.value }); 
    }); 

//try to sort the nodes and links before indexing them (not working) 
    graph.nodes.sort(function (a,b) {return d3.descending(a.value, b.value); }); 
    graph.links.sort(function (a,b) {return d3.descending(a.value, b.value); }); 

    // return only the distinct/unique nodes 
    graph.nodes = d3.keys(d3.nest() 
     .key(function (d) { return d.name; }) 
     .map(graph.nodes)); 

    // loop through each link replacing the text with its index from node 
    graph.links.forEach(function (d, i) { 
     graph.links[i].source = graph.nodes.indexOf(graph.links[i].source); 
     graph.links[i].target = graph.nodes.indexOf(graph.links[i].target); 
    }); 

    //now loop through each nodes to make nodes an array of objects 
    // rather than an array of strings 
    graph.nodes.forEach(function (d, i) { 
     graph.nodes[i] = { "name": d }; 
    }); 
+0

- 'graph.nodes.sort(関数(a、b)は{戻りd3.descending(a.value、b.valueを);});'ノードがありませんソートする値のプロパティを持っていません。 – Mark

+0

True。おそらく計算されるsankey.jsの中の値をソートする必要があります。ここに結果を投稿しようとします。 – seb

+0

@seb解決策を見つけましたか?もしそうなら、あなたは投稿できますか? – Danny

答えて

4

function resolveCollisions() { 
    ... 
    // nodes.sort(ascendingDepth); // commented this out to prevent node reordering 
    ... 
} 

ノードは次いで、しかしそれらによって垂直に順序付けされますもともと人口密度が高い。したがって、データをプッシュする前にノードを最初にソートすると、ソート順に表示されます。

1

iterationsの値を0に設定すると、アルファベット順(名前順)のノードが得られます。私が正しくあなたのコードを読んでいる場合

var sankey = d3.sankey() 
    .nodeWidth(36) 
    .nodePadding(40) 
    .size([width, height]) 
    .layout(0); /* <<<<<<< setting the iterations to zero */ 
関連する問題