web-dev-qa-db-ja.com

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
14
Mourndark

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>
13
thibautg