パッケージ管理のために、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/
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>