使用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 相关文章推荐
25个优雅的jQuery Tooltip插件推荐
May 25 Javascript
非常有用的40款jQuery 插件推荐(系列二)
Dec 25 Javascript
Prototype源码浅析 Enumerable部分(二)
Jan 18 Javascript
多个表单中如何获得这个文件上传的网址实现js代码
Mar 25 Javascript
JavaScript strike方法入门实例(给字符串加上删除线)
Oct 17 Javascript
JS限制文本框只能输入数字和字母方法
Feb 28 Javascript
jQuery Ajax使用FormData对象上传文件的方法
Sep 07 Javascript
JS实现仿UC浏览器前进后退效果的实例代码
Jul 17 Javascript
JavaScript全屏和退出全屏事件总结(附代码)
Aug 17 Javascript
JavaScrip关于创建常量的知识点
Dec 07 Javascript
详解如何模拟实现node中的Events模块(通俗易懂版)
Apr 15 Javascript
javascript的this关键字详解
May 20 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与浏览器缓存的分析
2013/06/03 PHP
实例简介PHP的一些高级面向对象编程的特性
2015/11/27 PHP
php计数排序算法的实现代码(附四个实例代码)
2020/03/31 PHP
CSS+JS构建的图片查看器
2006/07/22 Javascript
关于js拖拽上传 [一个拖拽上传修改头像的流程]
2011/07/13 Javascript
jquery快捷动态绑定键盘事件的操作函数代码
2013/10/17 Javascript
jQuery动态显示和隐藏datagrid中的某一列的方法
2013/12/11 Javascript
js获得参数的getParameter使用示例
2014/02/26 Javascript
轻松学习jQuery插件EasyUI EasyUI创建CRUD应用
2015/11/30 Javascript
BootStrap中Tab页签切换实例代码
2016/05/30 Javascript
WebSocket+node.js创建即时通信的Web聊天服务器
2016/08/08 Javascript
AngularJS 霸道的过滤器小结
2017/04/26 Javascript
第一个Vue插件从封装到发布
2017/11/22 Javascript
浅谈vue-cli加载不到dev-server.js的解决办法
2017/11/24 Javascript
如何在vue中使用ts的示例代码
2018/02/28 Javascript
JS如何在数组指定位置插入元素
2020/03/10 Javascript
Vue列表循环从指定下标开始的多种解决方案
2020/04/08 Javascript
vue 实现element-ui中的加载中状态
2020/11/11 Javascript
[01:28:43]2014 DOTA2华西杯精英邀请赛5 24 DK VS CIS
2014/05/25 DOTA
Python列表list数组array用法实例解析
2014/10/28 Python
在Python的web框架中中编写日志列表的教程
2015/04/30 Python
Django框架中间件(Middleware)用法实例分析
2019/05/24 Python
用python介绍4种常用的单链表翻转的方法小结
2020/02/24 Python
jupyter note 实现将数据保存为word
2020/04/14 Python
keras读取训练好的模型参数并把参数赋值给其它模型详解
2020/06/15 Python
Python局部变量与全局变量区别原理解析
2020/07/14 Python
Django:使用filter的pk进行多值查询操作
2020/07/15 Python
Python+Kepler.gl实现时间轮播地图过程解析
2020/07/20 Python
Python实现微信表情包炸群功能
2021/01/28 Python
HTML5视频播放插件 video.js介绍
2018/09/29 HTML / CSS
机电一体化大学生求职信
2013/11/08 职场文书
应届毕业生求职信范文
2013/12/18 职场文书
师范学院教师自荐书
2014/01/31 职场文书
销售助理岗位职责
2014/02/21 职场文书
财务负责人任命书
2014/06/06 职场文书
毕业生评语大全
2015/01/04 职场文书