score:27

Accepted answer

I am now using the following structure in my Vue projects. I am making a separate file to import all the needed modules and to export them all at once.

In ./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,
};

Then I import everything into my component and I am able to use all functions with their d3 prefix: d3.select, d3.selectAll etc.

In ./src/components/MyComponent.vue:

<template>

</template>

<script>

import d3 from '@/assets/d3';

export default {
  data() {
    return {

    };
  },
};

</script>

Related Query