D3.jsバブルチャートのグラフは、私がD3.jsとバブルチャートのグラフを作成し、私はAngularJSを使用して、それを変換したいと思いますが、私は失われていますAngularJS

Question

に表示されていません...私はthis tutorialを読んで何でもが表示されています。

これは私が作るコードです：

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

私は私が非常に失われていますので、あなたが私を助けることができることを願って...ありがとうございました！

Answer 1

が不足している多くのコードがあります

（I）あなたは、あなたのビューにng-appを追加していない

あなたがデータ

（III）directiveたを取得しているので、（ⅱ）$httpが注入されていませんでした正しく宣言されておらず、データが渡されていませんでした！

ここビューされています。ここでは

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

    } 
    }; 
}); 

はeffectivellyそれは動作しますが、あなたの応答のための作業Application