2015-11-01 17 views
5

D3 sankey'deki düğümleri sipariş etmeye çalışıyorum. Daha yükseğe çekilecek daha büyük değerlere sahip düğümler istiyorum.d3 sankey diyagramında sipariş düğümleri

İlgili kod (based on d3 noob's code) pasajıdır, burada D3'ün yerleşik sıralama işlevini kullanarak istediğimi elde etmeye çalışıyorum. Sonuç beklediğim gibi değil.

sankey.js'yi denetledikten sonra, eklentinin düğümleri nasıl sipariş ettiğini tam olarak anlayamadım. Konuyla ilgili herhangi bir tavsiye takdir edilecektir. değiştirmesini düğüm sırasını durur sankey.js dosyasında aşağıdaki resolveCollisions bir satır() işlev çıkarma

//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 (function (a, b) {return d3.descending (a.value, b.value);});' düğümleri yapar sıralamak için bir değer özelliği yok ... – Mark

+0

Doğru. Muhtemelen, hesaplandığı sankey.js içindeki değeri sıralamak zorunda kalacağım. Burada bir gönderiyi deneyeceğim. – seb

+0

@seb Çözümü anladın mı? Eğer öyleyse, gönderebilir misin? – Danny

cevap

4

:

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

düğümleri ve bununla birlikte dikey olarak sıralanacaktır onlar orijinal olarak doldurulur. Bu nedenle, düğümleri verileri itmeden önce sıralarsanız, sıralanmış sırayla görünecektir.

1

Düzeni iterations değerini sıfır olarak ayarlarsanız, düğümleri alfabetik (adlarına göre) düzeninde alırsınız: bu benim için yeterince iyi çalıştı. Doğru kodunuzu okuyorsam

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