Question

我想在同一时间添加两个图表D3.js。每个图表都可以完美地分开工作，但是当我将两个图表放在同一页面上时，它并不起作用。我不知道是否与控制者或指令发生冲突，或者冲突是否存在于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 希望你能帮助我。感谢。

Answer 1

您的JS代码的问题在于您要定义角度模块两次。你应该只在你的应用程序中使用此行，其中第二个参数是模块的任何依赖项的数组：

Sub NewTableStyle()
    Dim StyTbl As Style

    Set StyTbl = ActiveDocument.Styles.Add(Name:="PhaseTable", Type:=wdStyleTypeTable)

    With StyTbl.Table
        .Alignment = wdAlignRowLeft

        With .Condition(wdFirstRow)
            With .Borders(wdBorderBottom)
                .LineStyle = wdLineStyleSingle
                .Visible = True
                .LineWidth = wdLineWidth150pt
            End With
            With .Borders(wdBorderTop)
                .LineStyle = wdLineStyleSingle
                .Visible = True
                .LineWidth = wdLineWidth150pt
            End With
            With .Font
                .Bold = False
                .Size = 12
                .Name = "Times New Roman"
            End With

        End With
    End With
End Sub

要调用模块的其他任何地方，请使用angular.module('d3DemoApp', []);（不带第二个依赖项参数）

像这样：

angular.module('d3DemoApp')

第二个控制器：

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

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

您可以在此处了解详情：https://docs.angularjs.org/guide/module

我已经在这里修复了你的plnkr：https://plnkr.co/edit/o58pEyA93ydRIGHysWUI?p=preview

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

1 个答案: