D3.js气泡图;t与AngularJS一起出现

D3.js Bubble chart graph doesn't appears with AngularJS

本文关键字：AngularJS 一起 js 气泡 D3      更新时间：2023-09-26

我用D3.js制作了一个气泡图，我想用AngularJS转换它，但我迷路了。。。我读了本教程，但任何内容都出现了。

这是我制作的代码：

var d3DemoApp = angular.module('d3DemoApp', []);
// controller business logic
d3DemoApp.controller('AppCtrl', function AppCtrl ($scope) {
    $scope.data = './data.json';
    $scope.getCommitData = function () {
        $http({
            method: 'GET',
            url: $scope.data
        }).
        success(function (data) {
            // attach this data to the scope
            $scope.data = data;
            // clear the error messages
            $scope.error = '';
        }).
        error(function (data, status) {
            $scope.error = 'Error: ' + status;
        });
    };
    // get the commit data immediately
    $scope.getCommitData();
});
d3DemoApp.directive('ghVisualization', function () {
    return {
        restrict: 'E',
        scope: {
            val: '=',
            grouped: '='
        },
        link: function (scope, element, attrs) {
            var diameter = 900,
                format = d3.format(",d"),
                color = d3.scale.category20c();
            var bubble = d3.layout.pack()
                .sort(null)
                .parameter3([diameter, diameter])
                .value(function(d) { return (d.parameter1+1); })
                .padding(1.5);
            var svg = d3.select("body").append("svg")
                .attr("width", diameter)
                .attr("height", diameter)
                .attr("class", "bubble");
            scope.data = getCommitData();
            var node = svg.selectAll(".node")
                .data(bubble.nodes(classes($scope.data))
                    .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("opacity", "0")
                .style("fill", function (d) {
                    return "red";
                });
            node.append("text")
                .attr("dy", ".3em")
                .style("text-anchor", "middle")
                .text(function (d) {
                    return d.className.substring(0, d.r / 3);
                })
                .style("opacity", "0");
            node.on("click", click);
            function click(d) {
                alert("There is a click");
                document.getElementById('myDiv').value = d.parameter2;
            };

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

我希望你能帮助我，因为我很失落。。。非常感谢！

有很多缺少的代码

（i） 您尚未将ng-app添加到视图

（ii）由于您正在检索数据，因此未注入$http

（iii）directive未正确声明，数据未通过！

这是视图：

  <div id="containerGraphBubble">
    <bubble-chart chart-data="chartData">
    </bubble-chart>
  </div>

这是指令：

d3DemoApp.directive('bubbleChart', function() {
  return {
    restrict: 'EA',
    transclude: true,
    scope: {
      chartData: '='
    },
    link: function(scope, elem, attrs) {
      scope.$watch('chartData', function(newValue, oldValue) {
        if (newValue) {
          scope.drawChart(newValue);
        }
      });
      scope.drawChart = function(rootData) {
        var diameter = 960,
          format = d3.format(",d"),
          color = d3.scale.category20c();
        var bubble = d3.layout.pack()
          .sort(null)
          .size([diameter, diameter])
          .value(function(d) {
            console.log(d.size);
            return d.size;
          })
          .padding(1.5);
        var svg = d3.select("body").append("svg")
          .attr("width", diameter)
          .attr("height", diameter)
          .attr("class", "bubble");

        var node = svg.selectAll(".node")
          .data(bubble.nodes(classes(rootData))
            .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.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");
      }
      if (typeof scope.chartData != "undefined") {
        scope.drawChart(scope.chartData);
      }
    }
  };
});

这是正在工作的Application

相关文章：