Układ bąbelków D3/układ paczek - jak sprawić, aby bańki promieniowały z największych bąbelków do najmniejszych?

Question

więc używam tego samego kodu jako przykład tej galerii D3 (z własnymi danymi):

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

chciałbym uzyskać wykres bąbelkowy gdzie kręgi są rozmieszczone z największym w centrum, a następnie promieniują do najmniejszych.

Oto makiety stworzyłem w programie Photoshop:

Oto co mam kiedy posłużyć się przykładem (algorytm domyślny krąg opakowania z domyślnego sortowania):

Próbowałem modyfikować sortowanie (w tym próby d3. Rosnące i d3.descending). Najlepszym mogę wymyślić tylko zasadniczo podważa rodzaju ze stałą (ha!), Ale nadal jest daleki od tego, co chciałbym:

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

Ok, więc każdy szansa, że ​​można to zrobić bez zmiany rzeczywistego algorytmu układu D3? Jeśli nie, być może ktoś rozszerzył lub zmodyfikował układ paczki i mógłby mi powiedzieć 5 linii, które mogłem zmienić w źródle D3, by zhakować to.

Z góry dziękuję!

Edit:

Zgodnie z życzeniem, tutaj jest kod używam. Zasadniczo to samo co połączona próbka powyżej, z kilkoma powierzchownymi zmianami wskazanymi przez skomentowane wiersze:

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"); 

I moje dane.plik json:

{ 
    "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

Wszystko, co musisz zrobić, to podać:

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

To jest inna niż określając .sort(d3.ascending) lub .sort(d3.descending), ponieważ d3.ascending i d3.descending są zdefiniowane jako

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

i

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

respecitevly, a na układ pakietu wpływa "niewrażliwość" na różnicę punktów danych.

To jest mój przykład testu (z danymi) jsfiddle

---

eksperymentalnie zastosowałem również następującą funkcję sortowania: (jest to rodzaj hybrydy)

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

... a dla wartości progowych 10000000, 3000000, 1000000, 300000, 100000, 30000 odpowiednio otrzymałem: jsfiddle