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

我正试图在一个带有NPM的Vue.js项目中使用许多d3包进行包管理。我试图把我遇到的一个问题弄得一团糟，但无法在那里复制这个问题——代码完全按照它应该做的那样工作

我试图找出在JSFIDLE中运行的代码和在我的应用程序中运行的代码之间的区别，最大的区别是我如何导入额外的库。在fiddle中，我添加了从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

模块的任何功能

---

这里有问题：

我现在在我的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。选择
，
d3。选择所有
等

在
/src/components/MyComponent.vue
中：

<template>

</template>

<script>

import d3 from '@/assets/d3';

export default {
  data() {
    return {

    };
  },
};

</script>


从“@/assets/d3”导入d3；
导出默认值{
数据（）{
返回{
};
},
};
似乎有些多余。您应该能够直接在组件文件中导入相同的“资产”。这是真的，没有功能上的区别。这里的目标是在中心位置挑选d3模块，然后将它们全部导入组件中，并将它们与
d3.
前缀一起使用。