使用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 相关文章推荐
jquery动画2.元素坐标动画效果(创建一个图片走廊)
Aug 24 Javascript
node.js中的fs.chmod方法使用说明
Dec 18 Javascript
jQuery实现HTML表格单元格的合并功能
Apr 06 Javascript
仿iframe效果Aajx文件上传实例
Nov 18 Javascript
使用smartupload组件实现jsp+jdbc上传下载文件实例解析
Jan 05 Javascript
jquery easyui DataGrid简单示例
Jan 23 Javascript
深入理解Vue-cli搭建项目后的目录结构探秘
Jul 13 Javascript
Vue.js子组件向父组件通信的方法实例代码详解
Dec 10 Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
May 21 Javascript
使用p5.js临摹动态图形
Oct 23 Javascript
Vue基于iview实现登录密码的显示与隐藏功能
Mar 06 Javascript
vue全局使用axios的操作
Sep 08 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
apache mysql php 源码编译使用方法
2012/05/03 PHP
PHP获取文件夹内文件数的方法
2015/03/12 PHP
PHP CodeIgniter框架的工作原理研究
2015/03/30 PHP
Yii实现简单分页的方法
2016/04/29 PHP
PHP+Ajax无刷新带进度条图片上传示例
2017/02/08 PHP
修改jquery里的dialog对话框插件为框架页(iframe) 的方法
2010/09/14 Javascript
js中查找最近的共有祖先元素的实现代码
2010/12/30 Javascript
一个简单的网站访问JS计数器 刷新1次加1次访问
2012/09/20 Javascript
jquery实现弹出窗口效果的实例代码
2013/11/28 Javascript
js的[defer]和[async]属性
2014/11/24 Javascript
自定义jQuery插件方式实现强制对象重绘的方法
2015/03/23 Javascript
深入浅出理解javaScript原型链
2015/05/09 Javascript
js实现文本框选中的方法
2015/05/26 Javascript
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
2016/05/09 Javascript
Ionic实现页面下拉刷新(ion-refresher)功能代码
2016/06/03 Javascript
jQuery学习之DOM节点的插入方法总结
2017/01/22 Javascript
详解Javascript中DOM的范围
2017/02/13 Javascript
JavaScript关联数组用法分析【概念、定义、遍历】
2017/03/15 Javascript
JavaScript函数中的this四种绑定形式
2017/08/15 Javascript
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
2019/08/08 jQuery
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
2020/11/20 Vue.js
[49:21]2018DOTA2亚洲邀请赛3月30日 小组赛B组 Effect VS iG
2018/03/31 DOTA
Python 类与元类的深度挖掘 I【经验】
2016/05/06 Python
浅谈pyhton学习中出现的各种问题(新手必看)
2017/05/17 Python
Python3内置模块之base64编解码方法详解
2019/07/13 Python
python实现将一维列表转换为多维列表(numpy+reshape)
2019/11/29 Python
如何基于python操作json文件获取内容
2019/12/24 Python
CSS3实现线性渐变用法示例代码详解
2020/08/07 HTML / CSS
美国最大的在线水培用品商店:GrowersHouse.com
2018/08/14 全球购物
Martinelli官方商店:西班牙皮鞋和高跟鞋品牌
2019/07/30 全球购物
厂办主管岗位职责范本
2014/02/28 职场文书
2014年体育部工作总结
2014/11/13 职场文书
《清澈的湖水》教学反思
2016/02/17 职场文书
教你如何使用Python Tkinter库制作记事本
2021/06/10 Python
MySQL里面的子查询的基本使用
2021/08/02 MySQL
Python闭包的定义和使用方法
2022/04/11 Python