web-dev-qa-db-fra.com

Quelle est la bonne façon d'importer et d'utiliser d3 et ses sous-modules dans ES6?

J'essaie d'utiliser un certain nombre de packages d3 dans un projet Vue.js avec NPM pour la gestion des packages. J'essayais de résoudre un problème que j'ai, mais je ne peux pas reproduire le problème là-bas - le code fonctionne exactement comme il devrait le faire.

J'essaie d'identifier les différences entre le code exécuté dans JSFiddle et le code exécuté dans mon application et (à part le fait évident que je n'exécute pas Vue.js dans le violon), le plus important est la façon dont j'importe mon extra bibliothèques. Dans le violon, j'ajoute des liens vers les bibliothèques pertinentes de CDNJS tandis que dans mon application, j'utilise NPM et import. C'est tout pour exécuter des graphiques en utilisant dc, qui s'appuie sur beaucoup de d3 fonctionnalités. Mes importations complètes pour le composant graphique sont:

import dc from 'dc'
import crossfilter from 'crossfilter2'
import * as time from 'd3-time'
import * as scale from 'd3-scale'

Je n'utilise aucune fonctionnalité de la base d3 module.

Le violon en question est ici: https://jsfiddle.net/y1qby1xc/10/

d3.jsnpmecmascript-6dc.jses6-modules
14
Mourndark

J'utilise maintenant la structure suivante dans mes projets Vue. Je crée un fichier séparé pour importer tous les modules nécessaires et les exporter tous en même temps.

Dans ./src/assets/d3/index.js:

import { select, selectAll } from 'd3-selection';

import {
  scaleLinear,
  scaleTime,
  scaleOrdinal,
  schemeCategory10,
} from 'd3-scale';

import { axisTop } from 'd3-axis';

export default {
  select,
  selectAll,
  scaleLinear,
  scaleTime,
  scaleOrdinal,
  schemeCategory10,
  axisTop,
};

Ensuite, j'importe tout dans mon composant et je peux utiliser toutes les fonctions avec leur d3 préfixe: d3.select, d3.selectAll etc.

Dans ./src/components/MyComponent.vue:

<template>

</template>

<script>

import d3 from '@/assets/d3';

export default {
  data() {
    return {

    };
  },
};

</script>
13
thibautg