使用D3.js+Vue實現(xiàn)一個簡單的柱形圖
最近想在Vue的項目里嘗試使用d3.js,封裝一些常用的圖表。這里記錄一下自己搭建項目的過程,以及實現(xiàn)一個簡單的柱形圖。不了解D3的請移步D3 Data-Driven Documents,它是基于數(shù)據(jù)驅動文檔工作方式的一款JavaScript函數(shù)庫,主要用于網(wǎng)頁作圖、生成互動圖形,是最流行的可視化庫之一。
說明
- 采用Vue-cli腳手架快速搭建項目
- npm 安裝 D3
- 實現(xiàn)一個簡單的柱形圖
項目搭建
使用vue-cli搭建單頁應用:
# 安裝 vue-cli $ npm install --global vue-cli # 使用 "webpack" 模板創(chuàng)建一個新項目 $ vue init webpack d3-vue # 安裝依賴,然后開始! $ cd d3-vue $ npm run dev
D3安裝(最新的v5版本):
$ npm install d3 --save
D3引入:
$ import * as d3 from 'd3'
實現(xiàn)一個簡單的圖表
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.設置圖表數(shù)據(jù)
矩形圖主要構成部分有矩形、坐標軸和文字說明,我們需要的數(shù)據(jù)有圖表的數(shù)據(jù)、圖表寬度和矩形寬度
// 設置圖表數(shù)據(jù),圖表寬度和矩形寬度 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(),線性比例尺,將一個連續(xù)的區(qū)間映射到另一區(qū)間。繪圖時如果直接根據(jù)給出的數(shù)據(jù)給矩形的寬度賦值,有很大的局限性。比如一組數(shù)據(jù)里有一個數(shù)值為2000,我們是不可能用2000個像素來代表矩形的寬度的,因為畫布沒有那么長。這個時候我們就需要把某一區(qū)域的值映射到另一區(qū)域,轉換的過程中大小關系不變。
// x軸比例尺 var xScale = d3.scaleLinear() .domain([0, d3.max(chartData)]) .range([0, width])
5.矩形和label文字的容器,用于添加元素
在有數(shù)據(jù)卻沒有足夠圖形元素的時候,可以使用以下鏈式方法添加足夠的元素:
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.設置數(shù)據(jù)
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 } } } }
路由配置和數(shù)據(jù)請求
剩下的一部分就是各個頁面的vue-router路由配置和主頁的axios數(shù)據(jù)請求。
項目地址:d3-vue
總結
以上所述是小編給大家介紹的使用D3.js+Vue實現(xiàn)一個簡單的柱形圖,希望對大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會及時回復大家的!
相關文章
Vue2.x 項目性能優(yōu)化之代碼優(yōu)化的實現(xiàn)
這篇文章主要介紹了Vue2.x 項目性能優(yōu)化之代碼優(yōu)化的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2021-03-03