डी 3 बबल चार्ट/पैक लेआउट - बुलबुले को सबसे बड़े बुलबुले से सबसे छोटे से कैसे बाहर निकालना है?

Question

तो मैं एक ही इस डी 3 गैलरी उदाहरण के रूप में कोड (मेरे अपने डेटा के साथ) का उपयोग कर रहा:

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

मैं एक बबल चार्ट प्राप्त करना चाहते हैं जहां हलकों केंद्र में सबसे बड़ी व्यवस्था की जाती है और फिर सबसे छोटे से बाहर निकलती है। (डिफ़ॉल्ट प्रकार के साथ डिफ़ॉल्ट चक्र पैकिंग एल्गोरिथ्म

यहाँ जब मैं उदाहरण का उपयोग मैं क्या मिलता है:

यहाँ एक नकली अप मैं Photoshop में बनाया है):

मैंने इस तरह के tweaking (कोशिश d3.ascending और d3.descending सहित) tweaking करने की कोशिश की। सबसे अच्छा मैं सिर्फ मूल रूप से साथ आ सकता है एक निरंतर साथ तरह बाधित (हा!) अभी भी है, लेकिन मैं अपनी पसंद का से दूर है:

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

ठीक है, इसलिए किसी भी मौका यह वास्तविक डी 3 पैक लेआउट एल्गोरिदम को बदलने के बिना किया जा सकता है? यदि नहीं, तो शायद किसी ने पैक लेआउट को बढ़ाया या संशोधित किया है और मुझे 5 लाइनें बता सकती हैं जो मैं इसे 3 हैक करने के लिए डी 3 स्रोत में बदल सकता हूं।

अग्रिम धन्यवाद!

संपादित करें:

के रूप में अनुरोध किया है, यहाँ कोड मैं का उपयोग कर रहा है। मूल रूप से ऊपर लिंक नमूना के रूप में ही, कुछ सतही परिवर्तन के रूप में टिप्पणी की लाइनों द्वारा संकेत के साथ:

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

और मेरे डेटा।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

तुम सब करने की ज़रूरत है निर्दिष्ट करने के लिए है:

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

यह .sort(d3.ascending) या .sort(d3.descending) निर्दिष्ट करने से अलग है, d3.ascending के बाद से और d3.descending रूप

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

और परिभाषित कर रहे हैं

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

respecitevly, और पैक लेआउट डेटा बिंदुओं के अंतर के लिए उनकी "असंवेदनशीलता" से प्रभावित होता है।

यह मेरा परीक्षण उदाहरण है: (अपने डेटा के साथ) jsfiddle

---

प्रयोगात्मक रूप से, मैं भी तरह समारोह निम्नलिखित लागू:

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

(यह संकर की तरह है)

... और क्रमशः 10000000, 3000000, 1000000, 300000, 100000, 30000 की दहलीज के मूल्यों के लिए मुझे मिला: jsfiddle