在ES6中导入和使用d3及其子模块的正确方法是什么？

Question

我正在尝试在Vue.js项目中使用一些d3包和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/

Answer 1

我现在在Vue项目中使用以下结构.我正在创建一个单独的文件来导入所有需要的模块并一次导出它们.

在./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等等.

在./src/components/MyComponent.vue:

<template>

</template>

<script>

import d3 from '@/assets/d3';

export default {
  data() {
    return {

    };
  },
};

</script>