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

Question

我正在尝试在一个 Vue.js 项目中使用一些 d3 包和 NPM 来进行包管理。我试图对我遇到的问题进行 fiddle，但我无法在那里复制该问题 - 代码完全按照它应该的方式工作。

我正在尝试找出 JSFiddle 中的代码运行ning 和我的应用程序中的代码运行ning 之间的区别（除了我不是 [=30= 的显而易见的事实） ]ning Vue.js 在 fiddle) 最重要的是我如何导入额外的库。在 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 模块的任何功能。

有问题的 fiddle 在这里：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>

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

What is the correct way to import and use d3 and its submodules in ES6?

npm

d3.js

ecmascript-6

dc.js

es6-modules