AngularJSと同じページの2つのD3.jsグラフ

同時に2つのグラフD3.jsを追加したいと思います。各グラフは完全に別々に動作しますが、2つを同じページに置くと動作しません。私は制御者や指令と矛盾があるのか、紛争がdiv svgにあるのか分かりません。 11行目と20行目のコメントを外してグラフを別々にテストし、15行目と17行目と21行目をPlunkerにコメントすることができます。私は問題が2つのモジュールがそれらを消去するが、それを修正する方法を知っていますか？AngularJSと同じページの2つのD3.jsグラフ

<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>

グラフ1：

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

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

グラフ2：

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

これはPlunkerです：https://plnkr.co/edit/ekuhHkjLpqXX6XKG8mwU?p=preview はあなたが私を助けることができることを願っていますこれは、コードです。ありがとう。

出典

2016-05-11 Anonyme

JSコードの問題は、角度モジュールを2回定義することです。どこでも他にあなたは、モジュールを起動する第二の依存関係引数なし（angular.module('d3DemoApp')を使用したい

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

：あなたは2番目の引数があなたのモジュールの依存関係の配列であるあなたのアプリ内で一度だけ今までにこのラインを持っている必要があります）

ようなので：

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

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

第コントローラ：

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

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

あなたはここでそれについての詳細を学ぶことができます：https://plnkr.co/edit/o58pEyA93ydRIGHysWUI?p=preview

： https://docs.angularjs.org/guide/module

は、私はここで修正してあなたのplnkrをフォークしています

出典

2016-05-11 15:38:40 satJ

AngularJSと同じページの2つのD3.jsグラフ

答えて

関連する問題