使用D3.js+Vue實現一個簡單的柱形圖

2019-11-19 13:20:34

字體：大中小

來源：轉載

供稿：網友

最近想在Vue的項目里嘗試使用d3.js，封裝一些常用的圖表。這里記錄一下自己搭建項目的過程，以及實現一個簡單的柱形圖。不了解D3的請移步D3 Data-Driven Documents，它是基于數據驅動文檔工作方式的一款JavaScript函數庫，主要用于網頁作圖、生成互動圖形，是最流行的可視化庫之一。

說明

采用Vue-cli腳手架快速搭建項目
npm 安裝 D3
實現一個簡單的柱形圖

項目搭建

使用vue-cli搭建單頁應用:

# 安裝 vue-cli$ npm install --global vue-cli# 使用 "webpack" 模板創建一個新項目$ vue init webpack d3-vue# 安裝依賴，然后開始！$ cd d3-vue$ npm run dev

D3安裝(最新的v5版本):

$ npm install d3 --save

D3引入:

$ import * as d3 from 'd3'

實現一個簡單的圖表

1.在Vue中獲取dom元素

在vue中可以通過給標簽添加ref屬性，然后在js中利用this.$refs去引用它，從而操作該dom元素

<template> <div>  <h3>一個簡單的圖表</h3>  <svg ref="baseBarChart" class="base-bar-chart"></svg> </div></template>// 省略的代碼...var chartSvg = d3.select(this.$refs.baseBarChart)

2.設置圖表數據

矩形圖主要構成部分有矩形、坐標軸和文字說明，我們需要的數據有圖表的數據、圖表寬度和矩形寬度

// 設置圖表數據，圖表寬度和矩形寬度 var chartData = this.chartData var width = this.width var barHeight = this.barHeight

3.添加畫布

要繪圖，首先需要的是一塊繪圖的畫布。D3提供了眾多的SVG圖形的生成器，我們在這里使用SVG畫布。選擇文檔中的svg元素，這里用到了$refs屬性

// 畫布 var chartSvg = d3.select(this.$refs.baseBarChart) .attr('width', width) .attr('height', barHeight * chartData.length)

4.x軸比例尺

d3.scaleLinear(),線性比例尺，將一個連續的區間映射到另一區間。繪圖時如果直接根據給出的數據給矩形的寬度賦值，有很大的局限性。比如一組數據里有一個數值為2000，我們是不可能用2000個像素來代表矩形的寬度的，因為畫布沒有那么長。這個時候我們就需要把某一區域的值映射到另一區域，轉換的過程中大小關系不變。

// x軸比例尺 var xScale = d3.scaleLinear() .domain([0, d3.max(chartData)]) .range([0, width])

5.矩形和label文字的容器，用于添加元素
在有數據卻沒有足夠圖形元素的時候，可以使用以下鏈式方法添加足夠的元素:

selection.selectAll(element).data(data).enter().append(element)// 矩形和label文字組合的容var g = chartSvg.selectAll('g') .data(chartData) .enter().append('g') .attr('transform', function (d, i) { return 'translate(0,' + i * barHeight + ')' })

6.添加矩形和label文字

// 添加矩形 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 })

繪制后的圖形如下：

使用該組件

怎么使用我們定義好的柱形圖組件呢，分3步走:

1. import導入

2.設置數據

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數據請求。