我想同时添加两个图表 D3.js。每个图表都完美且独立地工作，但是当我将两个图表放在同一页面上时，它不起作用。我不知道是否与 Controller 或指令有冲突，或者冲突是否在 div svg 中。您可以单独测试图形，取消注释第 11 和 20 行，并在 Plunker 上注释第 15 到 17 和 21 行。 我知道问题是两个模块删除它们但如何解决？这是代码:
<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 希望你能帮助我。谢谢。
最佳答案
您的 JS 代码的问题在于您定义了两次 Angular 模块。你应该在你的应用程序中只有一次这一行，其中第二个参数是你的模块的任何依赖项的数组:
angular.module('d3DemoApp', []);
任何你想调用模块的地方，使用angular.module('d3DemoApp')(没有第二个依赖参数)
像这样:
var d3DemoApp = angular.module('d3DemoApp', []); // Define the module
d3DemoApp.controller('controllerBubble', function AppCtrl ($scope,$http) {
//...
}
第二个 Controller :
var d3DemoApp = angular.module('d3DemoApp'); //Define a var with the module as it's value
d3DemoApp.controller('controllerDependance', function AppCtrl ($scope,$http) {
//...
}
您可以在这里了解更多信息:https://docs.angularjs.org/guide/module
我已经用这里的修复程序 fork 了你的 plnkr:https://plnkr.co/edit/o58pEyA93ydRIGHysWUI?p=preview
关于javascript - 两个 D3.js 图与 AngularJS 在同一页面中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37165309/