使用D3.js+Vue实现一个简单的柱形图


Posted in Javascript onAugust 05, 2018

最近想在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 })

绘制后的图形如下:

使用D3.js+Vue实现一个简单的柱形图 

使用该组件

怎么使用我们定义好的柱形图组件呢,分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.js+Vue实现一个简单的柱形图

项目地址:d3-vue

总结

以上所述是小编给大家介绍的使用D3.js+Vue实现一个简单的柱形图,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
求得div 下 img的src地址的js代码
Feb 28 Javascript
Mootools 1.2教程 定时器和哈希简介
Sep 15 Javascript
jQuery移动web开发之页面跳转和加载外部页面的实现
Dec 04 Javascript
基于jQuery实现Accordion手风琴自定义插件
Oct 13 Javascript
JavaScript基于replace+正则实现ES6的字符串模版功能
Apr 25 Javascript
Vue应用部署到服务器的正确方式
Jul 15 Javascript
使用vue中的混入mixin优化表单验证插件问题
Jul 02 Javascript
浅析Vue中拆分视图层代码的5点建议
Aug 15 Javascript
微信小程序 下拉刷新及上拉加载原理解析
Nov 06 Javascript
js中的面向对象之对象常见创建方法详解
Dec 16 Javascript
vue 动态组件用法示例小结
Mar 06 Javascript
Vue移动端项目实现使用手机预览调试操作
Jul 18 Javascript
详解Require.js与Sea.js的区别
Aug 05 #Javascript
vue中关闭eslint的方法分析
Aug 04 #Javascript
详解Vue取消eslint语法限制
Aug 04 #Javascript
JavaScript原型对象、构造函数和实例对象功能与用法详解
Aug 04 #Javascript
JavaScript中变量、指针和引用功能与操作示例
Aug 04 #Javascript
webpack4.x开发环境配置详解
Aug 04 #Javascript
微信小程序实现收藏与取消收藏切换图片功能
Aug 03 #Javascript
You might like
《斗罗大陆》六翼天使武魂最强,为什么老千家不是上三宗?
2020/03/02 国漫
windows下开发并编译PHP扩展的方法
2011/03/18 PHP
php生成随机数的三种方法
2014/09/10 PHP
php中smarty实现多模版网站的方法
2015/06/11 PHP
Yii2框架加载css和js文件的方法分析
2019/05/25 PHP
事件冒泡是什么如何用jquery阻止事件冒泡
2013/03/20 Javascript
js中继承的几种用法总结(apply,call,prototype)
2013/12/26 Javascript
微信中一些常用的js方法汇总
2015/03/12 Javascript
jquery对象和DOM对象的相互转换详解
2016/10/18 Javascript
Javascript 函数的四种调用模式
2016/11/05 Javascript
vue-resourse将json数据输出实例
2017/03/08 Javascript
bootstrap 点击空白处popover弹出框隐藏实例
2018/01/24 Javascript
JS运动特效之任意值添加运动的方法分析
2018/01/24 Javascript
Vue组件和Route的生命周期实例详解
2018/02/10 Javascript
Vue打包后出现一些map文件的解决方法
2018/02/13 Javascript
React BootStrap用户体验框架快速上手
2018/03/06 Javascript
微信小程序实现tab页面切换功能
2018/07/13 Javascript
ES6基础之默认参数值
2019/02/21 Javascript
javaScript实现一个队列的方法
2020/07/14 Javascript
vue+Element-ui前端实现分页效果
2020/11/15 Javascript
[42:34]VP vs VG 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python获取文件版本信息、公司名和产品名的方法
2014/10/05 Python
浅谈Python 字符串格式化输出(format/printf)
2016/07/21 Python
python 排序算法总结及实例详解
2016/09/28 Python
Python实用技巧之利用元组代替字典并为元组元素命名
2018/07/11 Python
python 实现一次性在文件中写入多行的方法
2019/01/28 Python
利用python Selenium实现自动登陆京东签到领金币功能
2019/10/31 Python
python 安装教程之Pycharm安装及配置字体主题,换行,自动更新
2020/03/13 Python
Joie官方网上商店:购买服装和女装配饰
2018/06/05 全球购物
e路東瀛(JAPANiCAN)香港:日本旅游、日本酒店和温泉旅馆预订
2018/11/21 全球购物
尼克松手表官网:Nixon手表
2019/03/17 全球购物
致跳高运动员加油稿
2014/02/12 职场文书
珍惜时间演讲稿
2014/05/14 职场文书
国王的演讲观后感
2015/06/03 职场文书
学校学习型党组织建设心得体会
2019/06/21 职场文书
详解MySQL InnoDB存储引擎的内存管理
2021/04/08 MySQL