Two D3.js graph in the same page with AngularJS

Question

I would like to add two graph D3.js in same time. Each graph works perfectly and separately but when I put the two on the same page, it doesn't works. I don't know if there is a conflict with controlers or directive or if the conflict is in the div svg. You can test separately the graph uncommenting the line 11 and 20 and comment the line 15 to 17 and 21 on the Plunker. I know the problem is the two modules erase them but how to fix it ? This is the code :

<html>

  <head>
    <link rel="stylesheet" href="style.css">
  </head>

  <body ng-app="d3DemoApp">

<!-- <div id="graph1" ng-controller="controllerBubble">
  <bubble-chart chart-data="chartData"></bubble-chart>
</div> -->

<div id="graph2" ng-controller="controllerDependance">
    <dependance-chart dependance-data="dependanceData"></dependance-chart>
</div>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
    <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
 <!-- <script src="script1.js"></script> -->
<script src="script2.js"></script>
  </body>

</html>

The graph 1 :

var d3DemoApp = angular.module('d3DemoApp', []);

d3DemoApp.controller('controllerBubble', function AppCtrl ($scope,$http) {
 //...
}

The graph 2 :

var d3DemoApp = angular.module('d3DemoApp', []);
d3DemoApp.controller('controllerDependance', function AppCtrl ($scope,$http) {
//...
}

This is the Plunker : https://plnkr.co/edit/ekuhHkjLpqXX6XKG8mwU?p=preview Hope you will can help me. Thanks.

kayasky · Accepted Answer · 2016-05-11 15:38:40Z

The problem with your JS code is that you are defining the angular module twice. You should have this line only once ever in your app, where the second argument is an array of any dependencies for your module:

angular.module('d3DemoApp', []);

Anywhere else you want to invoke the module, use angular.module('d3DemoApp') (without the second dependencies argument)

Like so:

var d3DemoApp = angular.module('d3DemoApp', []); // Define the module

d3DemoApp.controller('controllerBubble', function AppCtrl ($scope,$http) {
  //...
}

The second controller:

var d3DemoApp = angular.module('d3DemoApp'); //Define a var with the module as it's value

d3DemoApp.controller('controllerDependance', function AppCtrl ($scope,$http) {
  //...
}

You can learn more about it here: https://docs.angularjs.org/guide/module

I have forked your plnkr with the fix here: https://plnkr.co/edit/o58pEyA93ydRIGHysWUI?p=preview

Collectives™ on Stack Overflow

Two D3.js graph in the same page with AngularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related