小編給大家分享一下如何使用D3.js+Vue實(shí)現(xiàn)柱形圖，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長期合作伙伴，公司提供的服務(wù)項(xiàng)目有：主機(jī)域名、網(wǎng)頁空間、營銷軟件、網(wǎng)站建設(shè)、三元網(wǎng)站維護(hù)、網(wǎng)站推廣。

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創(chuàng)建可維護(hù)性和可測試性更強(qiáng)的代碼庫，Vue允許可以將一個(gè)網(wǎng)頁分割成可復(fù)用的組件，每個(gè)組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網(wǎng)頁中相應(yīng)的地方，所以越來越多的前端開發(fā)者使用vue。

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

說明

• 采用Vue-cli腳手架快速搭建項(xiàng)目

• npm 安裝 D3

• 實(shí)現(xiàn)一個(gè)簡單的柱形圖

項(xiàng)目搭建

使用vue-cli搭建單頁應(yīng)用:

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

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

$ npm install d3 --save

D3引入:

$ import * as d3 from 'd3'

實(shí)現(xiàn)一個(gè)簡單的圖表

1.在Vue中獲取dom元素

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

// 省略的代碼...
var chartSvg = d3.select(this.$refs.baseBarChart)

2.設(shè)置圖表數(shù)據(jù)

矩形圖主要構(gòu)成部分有矩形、坐標(biāo)軸和文字說明，我們需要的數(shù)據(jù)有圖表的數(shù)據(jù)、圖表寬度和矩形寬度

// 設(shè)置圖表數(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(),線性比例尺，將一個(gè)連續(xù)的區(qū)間映射到另一區(qū)間。繪圖時(shí)如果直接根據(jù)給出的數(shù)據(jù)給矩形的寬度賦值，有很大的局限性。比如一組數(shù)據(jù)里有一個(gè)數(shù)值為2000，我們是不可能用2000個(gè)像素來代表矩形的寬度的，因?yàn)楫嫴紱]有那么長。這個(gè)時(shí)候我們就需要把某一區(qū)域的值映射到另一區(qū)域，轉(zhuǎn)換的過程中大小關(guān)系不變。

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

5.矩形和label文字的容器，用于添加元素
在有數(shù)據(jù)卻沒有足夠圖形元素的時(shí)候，可以使用以下鏈?zhǔn)椒椒ㄌ砑幼銐虻脑?

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導(dǎo)入

2.設(shè)置數(shù)據(jù)

3.通過屬性值傳遞給子組件

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ù)請求

剩下的一部分就是各個(gè)頁面的vue-router路由配置和主頁的axios數(shù)據(jù)請求。

以上是“如何使用D3.js+Vue實(shí)現(xiàn)柱形圖”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

標(biāo)題名稱：如何使用D3.js+Vue實(shí)現(xiàn)柱形圖-創(chuàng)新互聯(lián)
文章地址：http://weahome.cn/article/csiosh.html