快捷導(dǎo)航

在Vue項(xiàng)目中使用d3.js的實(shí)例代碼

更新時(shí)間：2018年05月01日 08:34:40 作者：歸去來(lái)兮-不如去兮

這篇文章主要介紹了在Vue項(xiàng)目中使用d3.js的實(shí)例代碼，非常不錯(cuò)，具有參考借鑒價(jià)值價(jià)值,需要的朋友可以參考下

之前寫(xiě)一個(gè) Demo里面有些東西要使用d3實(shí)現(xiàn)一些效果但是在很多論壇找資源都找不到可以在Vue里面使用D3.js的方法,npm 上面的D3相對(duì)來(lái)說(shuō) 可以說(shuō)是很不人性化了完全沒(méi)有說(shuō) 在webpack上怎么使用D3.js

最后折騰很久看到某位外國(guó)大佬看他的案例成功的實(shí)現(xiàn)了在Vue項(xiàng)目里面實(shí)現(xiàn)D3的使用

首先安裝

npm install d3 --save-dev

以防萬(wàn)一,然后看package.json

安裝完成

在我們開(kāi)始之前，讓我們渲染一個(gè)Vue組件，它使用常規(guī)的D3 DOM操作呈現(xiàn)一個(gè)簡(jiǎn)單的折線(xiàn)圖：

<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>

代碼簡(jiǎn)單易懂，但這僅僅是一個(gè)基本的例子。因?yàn)槲覀儧](méi)有使用模板，所以需要更多操作和計(jì)算的更復(fù)雜的可視化會(huì)掩蓋組件的設(shè)計(jì)和邏輯。上述方法的另一個(gè)警告是，我們不能使用scopedCSS 的屬性，因?yàn)镈3會(huì)動(dòng)態(tài)地向DOM添加元素。

可以使用比較奇怪,但是代碼比較優(yōu)雅的方式去實(shí)現(xiàn)

<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>

非?？幔词顾鼪](méi)有公開(kāi)任何屬性并且數(shù)據(jù)是硬編碼的，它很好地將視圖從邏輯中分離出來(lái)，并且使用Vue鉤子，方法和data對(duì)象,現(xiàn)象和上圖一樣的。

總結(jié)

以上所述是小編給大家介紹的在Vue項(xiàng)目中使用d3.js的實(shí)例代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！

您可能感興趣的文章: