如何使用D3.js + Vue实现柱形图

　　介绍

小编给大家分享一下如何使用D3。js + Vue实现柱形图,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!

为什么要使用Vue

Vue是一款友好的,多用途且高性能的JavaScript框架,使用Vue可以创建可维护性和可测试性更强的代码库,Vue允许可以将一个网页分割成可复用的组件,每个组件都包含属于自己的HTML, CSS, JavaScript,以用来渲染网页中相应的地方,所以越来越多的前端开发者使用Vue。

最近想在Vue的项目里尝试使用d3。js,封装一些常用的图表。这里记录一下自己搭建项目的过程,以及实现一个简单的柱形图。不了解D3的请移步D3数据驱动文件,它是基于数据驱动文档工作方式的一款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美元安装D3 -保存

D3引入:

<代码>进口美元*从& # 39;D3 D3 # 39;

<>强实现一个简单的图表

1。在Vue中获取dom元素

在Vue中可以通过给标签添加ref属性,然后在js中利用。美元去参考文献引用它,从而操作该dom元素

& lt; template> 　　,& lt; div> 　　& lt;才能h4>一个简单的图表& lt;/h4> 　　& lt;才能svg  ref=癰aseBarChart",类=癰ase-bar-chart"祝辞& lt;/svg> 　　,& lt;/div> 　　& lt;/template>//,省略的代码…… 　　var  chartSvg =, d3.select(这一点。refs.baseBarChart美元)

2。设置图表数据

矩形图主要构成部分有矩形,坐标轴和文字说明,我们需要的数据有图表的数据,图表宽度和矩形宽度

//,设置图表数据,图表宽度和矩形宽度 　　,var  chartData =this.chartData 　　,var  width =上 　　,var  barHeight =, this.barHeight

3。添加画布

要绘图,首先需要的是一块绘图的画布.D3提供了众多的SVG图形的生成器,我们在这里使用SVG画布。选择文档中的SVG元素,这里用到美元了参属性

//,画布 　　,var  chartSvg =, d3.select(这一点。refs.baseBarChart美元) 　　,.attr(& # 39;宽度# 39;,,宽度) 　　,.attr(& # 39;高度# 39;,,barHeight  *, chartData.length)

4. x轴比例尺

d3.scaleLinear(),线性比例尺,将一个连续的区间映射到另一区间。绘图时如果直接根据给出的数据给矩形的宽度赋值,有很大的局限性。比如一组数据里有一个数值为2000,我们是不可能用2000个像素来代表矩形的宽度的,因为画布没有那么长。这个时候我们就需要把某一区域的值映射到另一区域,转换的过程中大小关系不变。

//, x轴比例尺 　　,var  xScale =, d3.scaleLinear () 　　,.domain ([0,, d3.max (chartData))) 　　,.range([0,宽度])

5。矩形和标签文字的容器,用于添加元素
在有数据却没有足够图形元素的时候,可以使用以下链式方法添加足够的元素:

selection.selectAll(元素). data(数据).enter () .append(元素)//,矩形和标签文字组合的容 　　var  g =, chartSvg.selectAll(& # 39;舌鳎# 39;) 　　,. data (chartData) 　　,.enter () .append(& # 39;舌鳎# 39;) 　　,.attr(& # 39;变换# 39;,,function  (d, i), {, return  & # 39;翻译(0,& # 39;,+,小姐:*,barHeight  +, & # 39;) & # 39;,})

6。添加矩形和标签文字

//,添加矩形 　　,g.append(& # 39;矩形# 39;) 　　,.attr(& # 39;宽度# 39;,,xScale) 　　,.attr(& # 39;高度# 39;,,barHeight 作用;2) 　　,.attr(& # 39;填补# 39;,,& # 39;绿色# 39;) 　　,//添加标签文字 　　,g.append(& # 39;文本# 39;) 　　,.attr (& # 39; x # 39;,, function  (d), {, return  xScale (d), +, 3,}) 　　,.attr (& # 39; y # 39;,, barHeight 作用;10) 　　,.attr (& # 39; dy # 39;,, & # 39; 0.3 em # 39;) 　　,.attr(& # 39;填补# 39;,,& # 39;红色# 39;) 　　,.style(& # 39;字体大小# 39;,,& # 39;12 px # 39;) 　　,。text (function  (d), {, return  d })

如何使用D3.js + Vue实现柱形图