Vueプロジェクトでd3.jsを利用した事例を詳しく解説

今回は、Vue プロジェクトで d3.js を使用する場合の詳細な説明をお届けします。 Vue プロジェクトで d3.js を使用する場合の 注意事項 について、以下に具体的なケースを示します。 。

以前書いたデモではd3を使ってエフェクトを実現していましたが、多くのフォーラムでリソースを探してもVueでD3.jsを使う方法が見つかりませんでした。 Webpack で D3.js を使用する方法についてはまったく話しませんでした

長い間苦労した後、ついに外国人の上司が彼の事例を見て、Vue プロジェクトに D3 の使用を実装することに成功しました

まず

インストール

npm install d3 --save-dev

念のため、package.jsonを見てください

インストールが完了しました

始める前に、通常のD3

DOM操作を使用して単純な折れ線グラフをレンダリングするVueコンポーネントをレンダリングしましょう:

<script>
import * as d3 from &#39;d3&#39;;
const data = [99, 71, 78, 25, 36, 92];
export default {
 name: &#39;non-vue-line-chart&#39;,
 template: &#39;<p>&#39;,
 mounted() {
  const svg = d3.select(this.$el)
   .append(&#39;svg&#39;)
   .attr(&#39;width&#39;, 500)
   .attr(&#39;height&#39;, 270)
   .append(&#39;g&#39;)
   .attr(&#39;transform&#39;, &#39;translate(0, 10)&#39;);
  const x = d3.scaleLinear().range([0, 430]);
  const y = d3.scaleLinear().range([210, 0]);
  d3.axisLeft().scale(x);
  d3.axisTop().scale(y);
  x.domain(d3.extent(data, (d, i) => i));
  y.domain([0, d3.max(data, d => d)]);
  const createPath = d3.line()
   .x((d, i) => x(i))
   .y(d => y(d));
  svg.append(&#39;path&#39;).attr(&#39;d&#39;, createPath(data));
 },
};
</script>
<style>
svg
 margin: 25px;
 path
  fill: none
  stroke: #76BF8A
  stroke-width: 3px
</style>

コード シンプルでわかりやすいですが、これは単なる基本的な例です。テンプレートを使用していないため、より多くの操作と計算を必要とする複雑な視覚化では、コンポーネントの設計とロジックがわかりにくくなります。上記のアプローチに関するもう 1 つの注意点は、D3 が要素を DOM に動的に追加するため、scopedCSS プロパティを使用できないことです。

は、奇妙だがエレガントなコーディング方法で実装できます

<template>
 <svg>
  <g>
   <path></path>
  </g>
 </svg>
</template>
<script>
import * as d3 from &#39;d3&#39;;
export default {
 name: &#39;vue-line-chart&#39;,
 data() {
  return {
   data: [99, 71, 78, 25, 36, 92],
   line: &#39;&#39;,
  };
 },
 mounted() {
  this.calculatePath();
 },
 methods: {
  getScales() {
   const x = d3.scaleTime().range([0, 430]);
   const y = d3.scaleLinear().range([210, 0]);
   d3.axisLeft().scale(x);
   d3.axisBottom().scale(y);
   x.domain(d3.extent(this.data, (d, i) => i));
   y.domain([0, d3.max(this.data, d => d)]);
   return { x, y };
  },
  calculatePath() {
   const scale = this.getScales();
   const path = d3.line()
    .x((d, i) => scale.x(i))
    .y(d => scale.y(d));
   this.line = path(this.data);
  },
 },
};
</script>
<style>
svg
 margin: 25px;
path
 fill: none
 stroke: #76BF8A
 stroke-width: 3px
</style>

非常にクールです。プロパティを公開せず、データがハードコーディングされているにもかかわらず、ビューをロジックからうまく分離しており、Vue を使用していますフック、メソッド、データ

オブジェクトの場合、現象は上の図と同じです。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

nodejsログモジュールwinstonの使い方のまとめ

Vueでwatchの使い方のまとめ

以上がVueプロジェクトでd3.jsを利用した事例を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。