在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: '<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添加元素。

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

<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對象,現象和上圖同樣的