如何操作Vue專案內使用d3.js

這次帶給大家如何操作Vue專案內使用d3.js，Vue專案內使用d3.js的注意事項有哪些，以下就是實戰案例，一起來看一下。

之前寫一個Demo裡面有些東西要使用d3實現一些效果但是在很多論壇找資源都找不到可以在Vue裡面使用D3.js的方法,npm 上面的D3相對來說可以說是很不人性化了完全沒有說在webpack上怎麼使用D3.js

最後折騰很久看到某位外國大佬看他的案例成功的實現了在Vue項目裡面實現D3的使用

首先安裝

npm install d3 --save-dev

以防萬一,然後看package.json

##已安裝完成

在我們開始之前，讓我們渲染一個Vue元件，它使用常規的D3

DOM操作呈現一個簡單的折線圖：

<script>
import * as d3 from 'd3';
const data = [99, 71, 78, 25, 36, 92];
export default {
 name: 'non-vue-line-chart',
 template: '<p></p>',
 mounted() {
  const svg = d3.select(this.$el)
   .append('svg')
   .attr('width', 500)
   .attr('height', 270)
   .append('g')
   .attr('transform', 'translate(0, 10)');
  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('path').attr('d', createPath(data));
 },
};
</script>
<style lang="sass">
svg
 margin: 25px;
 path
  fill: none
  stroke: #76BF8A
  stroke-width: 3px
</style>

程式碼簡單易懂，但這只是一個基本的例子。因為我們沒有使用模板，所以需要更多操作和計算的更複雜的視覺化會掩蓋組件的設計和邏輯。上述方法的另一個警告是，我們不能使用scopedCSS 的屬性，因為D3會動態地向DOM添加元素。

可以使用比較奇怪,但是程式碼比較優雅的方式去實現

<template>
 <svg width="500" height="270">
  <g style="transform: translate(0, 10px)">
   <path :d="line" />
  </g>
 </svg>
</template>
<script>
import * as d3 from 'd3';
export default {
 name: 'vue-line-chart',
 data() {
  return {
   data: [99, 71, 78, 25, 36, 92],
   line: '',
  };
 },
 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 lang="sass" scoped>
svg
 margin: 25px;
path
 fill: none
 stroke: #76BF8A
 stroke-width: 3px
</style>

非常酷，即使它沒有公開任何屬性並且資料是硬編碼的，它很好地將視圖從邏輯中分離出來，並且使用Vue鉤子，方法和data

物件,現象和上圖一樣的。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

怎麼實作Vue專案中使用Vux

#不用JS實作選單開啟關閉

以上是如何操作Vue專案內使用d3.js的詳細內容。更多資訊請關注PHP中文網其他相關文章！