最近想在Vue的項目裏嘗試使用d3.js,封裝一些經常使用的圖表。這裏記錄一下本身搭建項目的過程,以及實現一個簡單的柱形圖。不瞭解D3的請移步D3 Data-Driven Documents,它是基於數據驅動文檔工做方式的一款JavaScript函數庫,主要用於網頁做圖、生成互動圖形,是最流行的可視化庫之一。vue
使用vue-cli搭建單頁應用:webpack
# 安裝 vue-cli
$ npm install --global vue-cli
# 使用 "webpack" 模板建立一個新項目
$ vue init webpack d3-vue
# 安裝依賴,而後開始!
$ cd d3-vue
$ npm run dev
複製代碼
D3安裝(最新的v5版本):ios
$ npm install d3 --save
複製代碼
D3引入:git
$ import * as d3 from 'd3'
複製代碼
在vue中能夠經過給標籤添加ref屬性,而後在js中利用this.$refs去引用它,從而操做該dom元素github
<template>
<div>
<h3>一個簡單的圖表</h3>
<svg ref="baseBarChart" class="base-bar-chart"></svg>
</div>
</template>
// 省略的代碼...
var chartSvg = d3.select(this.$refs.baseBarChart)
複製代碼
矩形圖主要構成部分有矩形、座標軸和文字說明,咱們須要的數據有圖表的數據、圖表寬度和矩形寬度web
// 設置圖表數據,圖表寬度和矩形寬度
var chartData = this.chartData
var width = this.width
var barHeight = this.barHeight
複製代碼
要繪圖,首先須要的是一塊繪圖的畫布。D3提供了衆多的SVG圖形的生成器,咱們在這裏使用SVG畫布。選擇文檔中的svg元素,這裏用到了$refs屬性vue-router
// 畫布
var chartSvg = d3.select(this.$refs.baseBarChart)
.attr('width', width)
.attr('height', barHeight * chartData.length)
複製代碼
d3.scaleLinear(),線性比例尺,將一個連續的區間映射到另外一區間。繪圖時若是直接根據給出的數據給矩形的寬度賦值,有很大的侷限性。好比一組數據裏有一個數值爲2000,咱們是不可能用2000個像素來表明矩形的寬度的,由於畫布沒有那麼長。這個時候咱們就須要把某一區域的值映射到另外一區域,轉換的過程當中大小關係不變。vue-cli
// x軸比例尺
var xScale = d3.scaleLinear()
.domain([0, d3.max(chartData)])
.range([0, width])
複製代碼
在有數據卻沒有足夠圖形元素的時候,可使用如下鏈式方法添加足夠的元素: selection.selectAll(element).data(data).enter().append(element)npm
// 矩形和label文字組合的容
var g = chartSvg.selectAll('g')
.data(chartData)
.enter().append('g')
.attr('transform', function (d, i) { return 'translate(0,' + i * barHeight + ')' })
複製代碼
// 添加矩形
g.append('rect')
.attr('width', xScale)
.attr('height', barHeight - 2)
.attr('fill', 'green')
// 添加label文字
g.append('text')
.attr('x', function (d) { return xScale(d) + 3 })
.attr('y', barHeight - 10)
.attr('dy', '0.3em')
.attr('fill', 'red')
.style('font-size', '12px')
.text(function (d) { return d })
複製代碼
繪製後的圖形以下:axios
怎麼使用咱們定義好的柱形圖組件呢,分3步走:
<base-bar-chart :chart-data="barChart.data" :width="barChart.width" :bar-height="barChart.barHeight"></base-bar-chart>
import BaseBarChart from '../components/base-bar-chart'
export default {
name: 'BaseBarChartView',
components: {
BaseBarChart
},
data () {
return {
barChart: {
data: [4, 6, 12, 10, 8, 1, 9],
width: 540,
barHeight: 20
}
}
}
}
複製代碼
剩下的一部分就是各個頁面的vue-router路由配置和主頁的axios數據請求。