气泡图d3.js无效 - 对象数组

时间:2018-06-13 17:27:51

标签: javascript angularjs d3.js

我有一系列带有' name'和'价值'作为键值对。

我想实现这样的气泡图。

https://bl.ocks.org/john-guerra/0d81ccfd24578d5d563c55e785b3b40a

这是我的实施。

    $scope.getDashboardStats = function() {
            $('#bubble-chart').show();
            axios.post('/fbsidashboard/getDashboardStats', {rsrc:  $scope.selectedResourceName ?  $scope.selectedResourceName : ''})
                .then(function(res) {
                    $('#bubble-chart').hide();
                    var data = res.data;
                    $scope.dashboardStats = data.rows;
                    var diameter = 960,
                format = d3.format(",d"),
                color = d3.scaleOrdinal(d3.schemeCategory20c);

            var bubble = d3.pack()
                .size([diameter, diameter])
                .padding(1.5);

            var svg = d3.select("#container-stats").append("svg")
                .attr("width", diameter)
                .attr("height", diameter)
                .attr("class", "bubble");

                var root = d3.hierarchy(data)
                    .sum(function(d) { return d.value; })
                    .sort(function(a, b) { return b.value - a.value; });

                bubble(root);
                var node = svg.selectAll(".node")
                    .data(root)
                    .enter().append("g")
                    .attr("class", "node")
                    .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

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

                node.append("circle")
                    .attr("r", function(d) { return d.r; })
                    .style("fill", function(d) {
                        return color(d.data.packageName);
                    });

                node.append("text")
                    .attr("dy", ".3em")
                    .style("text-anchor", "middle")
                    .text(function(d) { return d.data.className.substring(0, d.r / 3); });
            d3.select(self.frameElement).style("height", diameter + "px");
                });
        };

请帮忙。

它根本不会抛出任何错误,图表也不会渲染。

如何传入一组具有诀窍的对象?

0 个答案:

没有答案