Question

我试图在Vue.js项目中使用大量d3软件包和NPM进行软件包管理。我试图弄清楚我所遇到的一个问题，但无法在那里复制问题 - 代码完全按照应有的方式工作。

我试图找出在JSFiddle中运行的代码与在我的应用程序中运行的代码之间的差异（除了显而易见的事实，即我没有在小提琴中运行Vue.js），最重要的是我如何导入我的额外库。在我的应用程序中，我使用NPM和import添加了从CDNJS到相关库的链接。这是使用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>

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

1 个答案: