angulaire.js - Comment utiliser D3 (bibliothèque JS) avec Angular?
黄舟
黄舟 2017-05-15 17:01:40
0
2
595

Je souhaite utiliser angulaire pour encapsuler une commande et y écrire la fonction de dessin d3.js.
Tout d'abord, j'ai suivi l'exemple sur Internet et j'ai enveloppé d3.js avec factory. Le fichier js s'appelait d3.js

.

Ensuite, j'ai empaqueté l'histogramme de dessin d3.js dans le fichier directive.js :

a ensuite cité la directive

dans la page

Enfin, les dépendances sont injectées dans app.js comme indiqué ci-dessous :

Certaines erreurs sont signalées comme suit :

Veuillez me dire comment résoudre ce problème. Qu'est-ce qui n'a pas fonctionné ? Je suis nouveau sur Angular, merci de me donner vos conseils sur divers aspects. .

黄舟
黄舟

人生最曼妙的风景,竟是内心的淡定与从容!

répondre à tous(2)
大家讲道理

En regardant la structure organisationnelle de votre code, il semble que la gestion des modules ne soit pas utilisée, alors introduisez d'abord d3 et utilisez-le directement. Il n'est pas nécessaire de couvrir d3 en une seule couche, et cela ne sera pas pratique pour les futures mises à niveau.

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

Utiliser directement

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

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

        });

Si possible, il est recommandé de séparer la logique de dessin de votre métier et d'en extraire un autre module, tel que

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

Peut-être que vous contribuerez à une superbe galerie de photos à l'avenir

黄舟

Si vous souhaitez utiliser des roues existantes, je vous recommande de jeter un œil à angulaire-nvd3. Il existe également des exemples
Si vous souhaitez l'essayer vous-même, je vous recommande de jeter un œil à Création de directives graphiques à l'aide d'AngularJS et D3.js (vous devrez peut-être contourner le mur...)

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal