2

私はバブルチャートアプリケーションに取り組んでいます。ただし、現時点では、グラフが壊れているように見えますが、理由はわかりません。

新しいデータセットが入ってきたら、バブルをアニメーション化しようと考えています.

http://jsfiddle.net/NYEaX/175/

setup: function(rawData, w, h){ 

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

            var bubble = d3.layout.pack()
                .sort(null)
                .size([w, h])
                .padding(1.5);

            var svg = d3.select(methods.el).append("svg")
                .attr("width", w)
                .attr("height", h)
                .attr("class", "bubblechart")
                .attr('viewBox', "0 0 "+parseInt(w, 10)+" "+parseInt(h, 10))
                .attr('perserveAspectRatio', "xMinYMid");

            var root = methods.conformData(rawData);

            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); });
            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: node.name, className: node.name, value: node.size});

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

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

            //this.resizeBubble();
        }
4

1 に答える 1