D3 Kabarcık grafik/paket düzeni - En büyük baloncuklardan en küçüğüne kadar kabarcıklar nasıl ortaya çıkar?

Question

Yani (kendi verileriyle) Bu D3 galeri örneği olarak aynı kodu kullanıyorum:

http://bl.ocks.org/mbostock/4063269

Bir balon grafiğini almak istiyorum nerede çevreler merkezdeki en büyük ile düzenlenir ve daha sonra en küçüğüne yayılır. İşte

ben Photoshop oluşturulan yukarı sahte: varsayılan sıralama ile

İşte

Ben örnek kullandığınızda ne alıyorum (varsayılan daire ambalaj algoritması):

Bu tür bir ayarlamayı denedim (d3.ascending ve d3.descending'i denemek dahil). Böylece herhangi

//... 
.sort(function(a, b) { return -1;}) 
//... 

Tamam: Ben sadece temelde ile gelen en iyi bir sabiti ile sıralama bozar (ha!) Ama hala ne istiyorsunuz uzaktır Bu gerçek D3 paket düzeni algoritmasını değiştirmek zorunda kalmadan yapılabilir mi? Aksi halde, belki bir kişi paket yerleşimini genişletti veya değiştirdi ve bunu kesmek için D3 kaynağında değiştirebileceğim 5 satırı söyleyebilirdi.

Şimdiden teşekkürler!

Düzenleme: İstendiği gibi

, burada kullanıyorum kodudur. Temelde yorumladı çizgilerle belirtildiği gibi birkaç yüzeysel değişikliklerle, yukarıda bağlantılı numunesi ile aynı:

var diameter = 960, 
format = d3.format(",d"), 
color = d3.scale.category20c(); 

var bubble = d3.layout.pack() 
// .sort(null) 
// .sort(d3.ascending) 
// .sort(d3.descending) 
    .sort(function(a, b) { return -1;}) // basically a < b always 
    .size([diameter, diameter]) 
    .padding(1.5); 

var svg = d3.select("body").append("svg") 
    .attr("width", diameter) 
    .attr("height", diameter) 
    .attr("class", "bubble"); 

d3.json("data.json", function(error, root) 
{ 
    var node = svg.selectAll(".node") 
     .data(bubble.nodes(classes(root)) 
     .filter(function(d) { return !d.children; })) 
     .enter().append("g") 
     .attr("class", "node") 
     .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); 

    node.append("title") 
     .text(function(d) { return d.className + ": " + format(d.value); }); 

    node.append("circle") 
     .attr("r", function(d) { return d.r; }) 
     .style("fill", function(d) 
      { 
       // return color(d.packageName); 
       return color(d.value); // this gives a different color for every leaf node 
      }); 

    node.append("text") 
     .attr("dy", ".3em") 
     .style("text-anchor", "middle") 
    // .text(function(d) { return d.className.substring(0, d.r/3); }); 
}); 

// Returns a flattened hierarchy containing all leaf nodes under the root. 
function classes(root) 
{ 
    var classes = []; 

    function recurse(name, node) { 
    if (node.children) node.children.forEach(function(child) { recurse(node.name, child); }); 
    else classes.push({packageName: name, className: node.name, value: node.size}); 
    } 

    recurse(null, root); 
    return {children: classes}; 
} 

d3.select(self.frameElement).style("height", diameter + "px"); 

Ve verileri.json dosyası:

{ 
    "name": "Root", 
    "children": [ 
     { 
      "name": "Leaf", 
      "children": null, 
      "size": 2098629 
     }, 
     { 
      "name": "Leaf", 
      "children": null, 
      "size": 104720 
     }, 
     { 
      "name": "Leaf", 
      "children": null, 
      "size": 5430 
     }, 
     { 
      "name": "Leaf", 
      "children": null, 
      "size": 102096 
     }, 
     { 
      "name": "Leaf", 
      "children": null, 
      "size": 986974 
     }, 
     { 
      "name": "Leaf", 
      "children": null, 
      "size": 59735 
     }, 
     { 
      "name": "Leaf", 
      "children": null, 
      "size": 1902 
     }, 
     { 
      "name": "Leaf", 
      "children": null, 
      "size": 120 
     }, 
     { 
      "name": "Leaf", 
      "children": null, 
      "size": 870751 
     }, 
     { 
      "name": "Leaf", 
      "children": null, 
      "size": 36672 
     }, 
     { 
      "name": "Leaf", 
      "children": null, 
      "size": 274338 
     }, 
     { 
      "name": "Leaf", 
      "children": null, 
      "size": 517693 
     }, 
     { 
      "name": "Leaf", 
      "children": null, 
      "size": 145807 
     }, 
     { 
      "name": "Leaf", 
      "children": null, 
      "size": 476178 
     }, 
     { 
      "name": "Leaf", 
      "children": null, 
      "size": 11771 
     }, 
     { 
      "name": "Leaf", 
      "children": null, 
      "size": 153 
     }, 
     { 
      "name": "Leaf", 
      "children": null, 
      "size": 2138 
     }, 
     { 
      "name": "Leaf", 
      "children": null, 
      "size": 8436 
     }, 
     { 
      "name": "Leaf", 
      "children": null, 
      "size": 3572 
     }, 
     { 
      "name": "Leaf", 
      "children": null, 
      "size": 120235 
     }, 
     { 
      "name": "Leaf", 
      "children": null, 
      "size": 210945 
     }, 
     { 
      "name": "Leaf", 
      "children": null, 
      "size": 56033 
     }, 
     { 
      "name": "Leaf", 
      "children": null, 
      "size": 358704 
     }, 
     { 
      "name": "Leaf", 
      "children": null, 
      "size": 295736 
     }, 
     { 
      "name": "Leaf", 
      "children": null, 
      "size": 26087 
     }, 
     { 
      "name": "Leaf", 
      "children": null, 
      "size": 33110 
     }, 
     { 
      "name": "Leaf", 
      "children": null, 
      "size": 3828 
     }, 
     { 
      "name": "Leaf", 
      "children": null, 
      "size": 1105544 
     }, 
     { 
      "name": "Leaf", 
      "children": null, 
      "size": 98740 
     }, 
     { 
      "name": "Leaf", 
      "children": null, 
      "size": 80723 
     }, 
     { 
      "name": "Leaf", 
      "children": null, 
      "size": 5766 
     }, 
     { 
      "name": "Leaf", 
      "children": null, 
      "size": 1453 
     }, 
     { 
      "name": "Leaf", 
      "children": null, 
      "size": 10443176 
     }, 
     { 
      "name": "Leaf", 
      "children": null, 
      "size": 14055 
     }, 
     { 
      "name": "Leaf", 
      "children": null, 
      "size": 1890127 
     }, 
     { 
      "name": "Leaf", 
      "children": null, 
      "size": 404575 
     }, 
     { 
      "name": "Leaf", 
      "children": null, 
      "size": 272777 
     }, 
     { 
      "name": "Leaf", 
      "children": null, 
      "size": 1269763 
     }, 
     { 
      "name": "Leaf", 
      "children": null, 
      "size": 5081 
     }, 
     { 
      "name": "Leaf", 
      "children": null, 
      "size": 3168510 
     }, 
     { 
      "name": "Leaf", 
      "children": null, 
      "size": 717031 
     }, 
     { 
      "name": "Leaf", 
      "children": null, 
      "size": 88418 
     }, 
     { 
      "name": "Leaf", 
      "children": null, 
      "size": 762084 
     }, 
     { 
      "name": "Leaf", 
      "children": null, 
      "size": 255055 
     }, 
     { 
      "name": "Leaf", 
      "children": null, 
      "size": 535 
     }, 
     { 
      "name": "Leaf", 
      "children": null, 
      "size": 81238 
     }, 
     { 
      "name": "Leaf", 
      "children": null, 
      "size": 17075 
     }, 
     { 
      "name": "Leaf", 
      "children": null, 
      "size": 5331 
     }, 
     { 
      "name": "Leaf", 
      "children": null, 
      "size": 74834 
     }, 
     { 
      "name": "Leaf", 
      "children": null, 
      "size": 110359 
     }, 
     { 
      "name": "Leaf", 
      "children": null, 
      "size": 27333 
     }, 
     { 
      "name": "Leaf", 
      "children": null, 
      "size": 143 
     }, 
     { 
      "name": "Leaf", 
      "children": null, 
      "size": 12721 
     }, 
     { 
      "name": "Leaf", 
      "children": null, 
      "size": 529 
     }, 
     { 
      "name": "Leaf", 
      "children": null, 
      "size": 115684 
     }, 
     { 
      "name": "Leaf", 
      "children": null, 
      "size": 3990850 
     }, 
     { 
      "name": "Leaf", 
      "children": null, 
      "size": 6045060 
     }, 
     { 
      "name": "Leaf", 
      "children": null, 
      "size": 2445766 
     }, 
     { 
      "name": "Leaf", 
      "children": null, 
      "size": 479865 
     }, 
     { 
      "name": "Leaf", 
      "children": null, 
      "size": 105743 
     }, 
     { 
      "name": "Leaf", 
      "children": null, 
      "size": 183750 
     }, 
     { 
      "name": "Leaf", 
      "children": null, 
      "size": 661 
     }, 
     { 
      "name": "Leaf", 
      "children": null, 
      "size": 11181 
     } 
    ], 
    "size": 41103329 
} 

Answer 1

yapmanız gereken tek şey belirtmektir:

.sort(function(a, b) { 
    return -(a.value - b.value); 
}) 

Bu .sort(d3.ascending) veya .sort(d3.descending) belirterek farklıdır, d3.ascending beri d3.descending

function(a, b) { 
    return a < b ? -1 : a > b ? 1 : 0; 
} 

ve şöyle tanımlanmıştır

function(a, b) { 
    return b < a ? -1 : b > a ? 1 : 0; 
} 

ve paket düzeni, veri noktalarının farkına karşı "duyarsızlıklarından" etkilenir.

Bu benim test örneği: (verilerinizin ile) jsfiddle

---

Deneysel olarak, ben sıralama işlevi aşağıdaki ayrıca uygulanan:

.sort(function(a, b) { 
    var threshold = 10000000; 
    if ((a.value > threshold) && (b.value > threshold)) { 
     return -(a.value - b.value); 
    } else { 
     return -1; 
    } 
}) 

(o melez bir tür)

... ve 10000000, 3000000, 1000000, 300000, 100000, 30000 eşik değerleri için sırasıyla: jsfiddle