angular.js - How to use d3 (js library) with angular?

Question

I want to use angular to encapsulate a command and write the d3.js drawing function into it. First of all, I followed the example on the Internet and wrapped d3.js with factory. The js file was named d3.js Then I packaged the d3.js drawing histogram in the directive.js file: then quoted the directive in the page Finally, the dependencies are injected into app.js as shown below: Some errors are reported as follows: Please tell me how to solve this problem. What went wrong? I am new to angular, please give me your advice in various aspects. .

Answer 1

Looking at the organizational structure of your code, it seems that module management is not used, so introduce d3 first and use it directly. There is no need to cover d3 in one layer, and it will not be convenient for future upgrades

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

Use directly

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

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

        });

If possible, it is recommended that you separate the drawing logic from your business and extract another module, such as

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

Maybe you will contribute an awesome photo gallery in the future

Answer 2

If you want to use existing wheels, I recommend you take a look at angular-nvd3. There are also examples
If you want to try it yourself, I recommend you take a look at Creating Charting Directives Using AngularJS and D3.js (you may need to bypass the wall...)