angular.js - 如何将d3（js库）与angular同使用？

Question

我想用angular封装一个指令，将d3.js画图的功能写进去。
首先我仿照网上的例子，将d3.js用factory包了起来，js文件命名为d3.js

然后我在 directive.js文件中把d3.js绘制柱状图封装：

之后在页面中引用了指令

最后再app.js中注入了依赖如图：

现在有些报错如下：

请教如何解决这个问题呢。哪里出了问题？angular新手，请大家在各方面指教。。

Answer 1

Melihat struktur organisasi kod anda, nampaknya pengurusan modul tidak digunakan, jadi perkenalkan d3 dahulu dan gunakannya secara langsung. Tidak perlu menutup d3 dalam satu lapisan, dan ia tidak akan memudahkan untuk naik taraf pada masa hadapan

<script src="lib/d3.js"></script>
<script src="lib/angular.js"></script>

Gunakan terus

angular.module('myApp.directive', [])
        .constant('d3',d3)
        .directive('d3Bars', function (d3) {
            return {}
        });

angular.module('myApp', ['myApp.directive'])
        .controller(function () {

        });

Jika boleh, anda disyorkan agar memisahkan logik lukisan daripada perniagaan anda dan mengekstrak modul lain, seperti

angular.module('ngD3', [])
        .constant('d3',d3)
        .directive('d3Bars', function (d3) {
            return {}
        });

Mungkin anda akan menyumbang galeri foto yang hebat pada masa hadapan

Answer 2

Jika anda ingin menggunakan roda sedia ada, saya syorkan anda melihat sudut-nvd3. Terdapat juga contoh
Jika anda ingin mencubanya sendiri, saya syorkan anda lihat Mencipta Arahan Carta Menggunakan AngularJS dan D3.js (anda mungkin perlu memintas dinding...)