使用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 相关文章推荐
用RadioButten或CheckBox实现div的显示与隐藏
Sep 21 Javascript
javascript实现的弹出层背景置灰-模拟(easyui dialog)
Dec 27 Javascript
深入理解JavaScript系列(36):设计模式之中介者模式详解
Mar 04 Javascript
理解Javascript的动态语言特性
Jun 17 Javascript
jQuery插件jquery-barcode实现条码打印的方法
Nov 25 Javascript
AngularJS 使用$sce控制代码安全检查
Jan 05 Javascript
JavaScript的String字符串对象常用操作总结
May 26 Javascript
使用JavaScript为一张图片设置备选路径的方法
Jan 04 Javascript
js 颜色选择插件
Jan 23 Javascript
angularjs实现搜索的关键字在正文中高亮出来
Jun 13 Javascript
详解用node搭建简单的静态资源管理器
Aug 09 Javascript
基于JavaScript实现新增内容滚动播放效果附完整代码
Aug 24 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
php使用simplexml_load_file加载XML文件并显示XML的方法
2015/03/19 PHP
php打包压缩文件之ZipArchive方法用法分析
2016/04/30 PHP
再谈PHP中单双引号的区别详解
2016/06/12 PHP
PHP利用Socket获取网站的SSL证书与公钥
2017/06/18 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
document 和 document.all 分别什么时候用
2006/06/22 Javascript
让您的菜单不离网站
2006/10/03 Javascript
jQuery 类twitter的文本字数限制带提示效果插件
2010/04/16 Javascript
基于JQuery的浮动DIV显示提示信息并自动隐藏
2011/02/11 Javascript
javascript jscroll模拟html元素滚动条
2012/12/18 Javascript
原生js的弹出层且其内的窗口居中
2014/05/14 Javascript
使用javascript实现监控视频播放并打印日志
2015/01/05 Javascript
JQuery基础语法小结
2015/02/27 Javascript
AngularJS模块管理问题的非常规处理方法
2015/04/29 Javascript
JavaScript实现翻页功能(附效果图)
2017/02/16 Javascript
使用Electron构建React+Webpack桌面应用的方法
2017/12/15 Javascript
JS实现HTML页面中动态显示当前时间完整示例
2018/07/30 Javascript
Windows下Node爬虫神器Puppeteer安装记
2019/01/09 Javascript
深入解析微信小程序开发中遇到的几个小问题
2020/07/11 Javascript
Python文件操作,open读写文件,追加文本内容实例
2016/12/14 Python
Python查询IP地址归属完整代码
2017/06/21 Python
Python跨文件全局变量的实现方法示例
2017/12/10 Python
Django实现全文检索的方法(支持中文)
2018/05/14 Python
Python基于Hypothesis测试库生成测试数据
2020/04/29 Python
Python的Django框架实现数据库查询(不返回QuerySet的方法)
2020/05/19 Python
Pytorch mask-rcnn 实现细节分享
2020/06/24 Python
PyQt5的QWebEngineView使用示例
2020/10/20 Python
浅谈html5标签css3的常用样式
2016/10/20 HTML / CSS
南非最大的花卉和送礼服务:NetFlorist
2017/09/13 全球购物
惠普香港官方商店:HP香港
2019/04/30 全球购物
学生个人的自我评价分享
2013/11/05 职场文书
六十岁生日答谢词
2014/01/10 职场文书
爱情寄语大全
2014/04/09 职场文书
市级青年文明号申报材料
2014/05/26 职场文书
2015年秘书个人工作总结
2015/04/25 职场文书
python基于OpenCV模板匹配识别图片中的数字
2021/03/31 Python