AngularJS页面中的两个D3.js图
AngularJS页面中的两个D3.js图
提问于 2016-05-11 14:13:32
我想同时添加两个图D3.js。每个图都是完美的和单独的，但是当我将两者放在同一个页面上时，它就不能工作了。我不知道是否存在与控制器或指令的冲突，或者冲突是否在div中。您可以分别测试图，去掉第11行和第20行的注释，并在柱塞上对第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) {
//...
}这是柱塞：https://plnkr.co/edit/ekuhHkjLpqXX6XKG8mwU?p=preview希望你能帮我。谢谢。
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-05-11 15:38:40
JS代码的问题是，您要定义角度模块两次。您应该只在应用程序中使用这一行，其中第二个参数是模块的任何依赖项的数组：
angular.module('d3DemoApp', []);在任何您想要调用模块的地方，使用angular.module('d3DemoApp') (没有第二个依赖项参数)
就像这样：
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://docs.angularjs.org/guide/module
我已经把你的plnkr和修复程序分叉了：https://plnkr.co/edit/o58pEyA93ydRIGHysWUI?p=preview
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37165309
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号