在Vue專案裡面使用d3.js

wait.發表於2018-10-23
VueJS

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

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

首先安裝

npm install d3 --save-dev
複製程式碼

以防萬一,然後看package.json

在Vue專案裡面使用d3.js

安裝完成

在我們開始之前，讓我們渲染一個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: '<div></div>',
  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新增元素。

在Vue專案裡面使用d3.js

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

<template>
  <svg width="500" height="270">
    <g style="transform: translate(0, 10px)">
      <path :d="line" />
    </g> //前端全棧學習交流圈：866109386
  </svg> //針對1-3年經驗前端開發人員
</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物件,現象和上圖一樣的

相關文章