时间戳

首页 > 解决方案 > 在 ES6 中导入和使用 d3 及其子模块的正确方法是什么？

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

问题描述

我正在尝试在带有 NPM 的 Vue.js 项目中使用许多 d3 包进行包管理。我试图解决我遇到的问题，但无法在那里复制问题 - 代码完全按照它应该做的那样工作。

我试图找出在 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/

标签： d3.jsnpmecmascript-6dc.jses6-modules

解决方案

我现在在我的 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>

推荐阅读