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

levin在掘金發表於2018-08-04
JSVue

最近想在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資料請求。

專案圖
專案地址:d3-vue

相關文章