Как правильно импортировать и использовать d3 и его подмодули в ES6? - PullRequest
Новая
       28

Как правильно импортировать и использовать d3 и его подмодули в ES6?

0 голосов
/ 30 мая 2018

Я пытаюсь использовать несколько пакетов d3 в проекте Vue.js с NPM для управления пакетами.Я пытался разобраться с проблемой, которая у меня возникла, но я не могу воспроизвести проблему там - код работает точно так, как должен.

Я пытаюсь определить различия между кодом, выполняющимся вJSFiddle и код, работающий в моем приложении, и (кроме очевидного факта, что я не запускаю Vue.js в скрипке), главное - это то, как я импортирую свои дополнительные библиотеки.В скрипте я добавляю ссылки на соответствующие библиотеки из CDNJS, а в своем приложении я использую NPM и import.Это все для запуска диаграмм с использованием dc, который основан на множестве d3 функций.Мой полный импорт для компонента диаграммы: 

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

Я не использую никаких функций из базового модуля d3.

Рассматриваемая скрипта находится здесь: https://jsfiddle.net/y1qby1xc/10/

1 Ответ

0 голосов
/ 30 мая 2018

Я сейчас использую следующую структуру в моих проектах Vue.Я делаю отдельный файл, чтобы импортировать все необходимые модули и экспортировать их все сразу.

In ./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,
};

Затем я импортирую все в свой компонент, и явозможность использовать все функции с префиксом d3: d3.select, d3.selectAll и т. д.

In ./src/components/MyComponent.vue: 

<template>

</template>

<script>

import d3 from '@/assets/d3';

export default {
  data() {
    return {

    };
  },
};

</script>
...