gpt4 book ai didi

javascript - 两个 D3.js 图与 AngularJS 在同一页面中

转载 作者:行者123 更新时间:2023-11-30 00:09:18 25 4
gpt4 key购买 nike

我想同时添加两个图表 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com