D3.js Graphique graphique à bulles n'apparaît pas avec AngularJS

Question

Je fais un graphique Diagramme à bulles avec D3.js et je voudrais le transformer en utilisant AngularJS mais je suis perdu ... Je lis this tutorial mais tout est apparu.

Ce code je fais:

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

J'espère que vous pouvez me aider parce que je suis très perdu ... Merci beaucoup!

Answer 1

Il y a beaucoup de code manquant

(i) Vous n'avez pas ajouté ng-app à votre vue

(ii) $http n'a pas été injecté puisque vous extrayez des données

(iii) directive était pas correctement déclaré et les données n'étaient pas transmises!

Voici le Voir:

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

Voici la directive:

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

    } 
    }; 
}); 

Voici le travail Application