मैं अपने बबल चार्ट प्रोजेक्ट को सही ढंग से पैक करना चाहता हूं (मैं अपने JSON .attr("r", function(d) { return d.size; })) में एक मान के लिए आकार बदलता हूं, अगर मेरे पास बहुत सारे बुलबुले हैं, तो वे ओवरलैप करते हैं। मैं डॉक पर .pack() विधि की जांच करता हूं। लेकिन मैं इसका सही उपयोग नहीं करता, मुझे समझ नहीं आता कि इसका उपयोग कैसे किया जाए।

<!DOCTYPE html>
<meta charset="utf-8">
<style>
    text {
        font: 10px sans-serif;
    }
</style>
<body>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>

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

    var bubble = d3.layout.pack()
            .sort(null)
            .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) {
        if (error) throw error;

        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.size; })
                .style("fill", function(d) { return color(d.size); });

        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, size: node.size});
        }
        recurse(null, root);
        return {children: classes};
    }
    d3.select(self.frameElement).style("height", diameter + "px");

</script>
</body>

यह है प्रोजेक्ट प्लंकर : https://plnkr.co/edit/PjN6v3dr2yP3oST5sCTB?p=preview

1
Anonyme 25 अप्रैल 2016, 17:11

1 उत्तर

सबसे बढ़िया उत्तर

इस लाइन के बजाय:

.attr("r", function(d) {return d.size; })

d.r का उपयोग करें जो बबल पैक द्वारा उत्पन्न होता है:

.attr("r", function(d) {return d.r; })

अपडेट किया गया plnkr : https://plnkr.co/edit/ao9RbxOKQ7VuobzOsVJd?p=preview

1
thatOneGuy 25 अप्रैल 2016, 18:21
जब आप इसे रिकर्स फ़ंक्शन में मान पर पास करते हैं तो बबल पैक आकार को जानता है: मान: नोड। आकार
 – 
thatOneGuy
25 अप्रैल 2016, 18:23
ठीक है, धन्यवाद यह काम करता है! .attr("r", function(d) {return d.r; }) मूल उदाहरण में था, इसलिए मुझे समझ नहीं आया कि विशेषता क्या है: .value(function(d) { console.log(d.size);return d.size; })
 – 
Anonyme
25 अप्रैल 2016, 21:46