手机版

用D3.js Vue实现简单的柱形图

时间:2021-08-30 来源:互联网 编辑:宝哥软件园 浏览:

最近想尝试在Vue项目中使用d3.js封装一些常用的图表。在这里,记录下自己构建项目的过程,实现一个简单的柱形图。如果你不知道D3,请去D3数据驱动文档,这是一个基于数据驱动文档工作模式的JavaScript函数库。它主要用于绘制网页和生成交互式图形,是最流行的可视化库之一。

解释

利用Vue-cli脚手架快速施工项目npm安装D3实现简单柱形图项目施工

使用vue-cli构建单页应用程序:

# install vue-CLI $ npminstall-globalvue-CLI #使用“webpack”模板创建一个新项目$ vue init webpack d3-vue#安装依赖项并启动!$ cd d3-vue$ npm运行devD3安装(最新v5版本):

$ npm安装d3 -保存

D3被引入:

$ import *从“d3”作为d3

实现一个简单的图表

1.在Vue中获取dom元素

在vue中,您可以通过向标记添加ref属性来操作dom元素,然后使用它。$refs在js中引用它

模板div h3一个简单的图表/H3 SVG ref='基础条形图' class='基础条形图'/SVG/div/模板//省略代码.var图表SVG=d3 .选择(这。$ refs.base条形图)2。设置图表数据

矩形图的主要组成部分是矩形、坐标轴和文字描述。我们需要的数据是图表数据、图表宽度和矩形宽度

//设置图表数据、图表宽度和矩形宽度var chart data=this . chart data var width=this . width var bar height=this . bar height 3。添加画布

要画画,首先需要的是一张画画用的画布。D3提供了大量的SVG图形生成器,这里我们使用的是SVG画布。选择文档中的svg元素,这里使用$refs属性

//canvas varchart SVG=D3 . select(this。$ refs.basebarchart)。attr ('width ',width)。attr ('height ',barheight * chartdata.length) 4.x轴刻度

D3.scaleLinear(),一种线性标度,将一个连续的区间映射到另一个区间。在绘图时,如果直接根据给定的数据指定矩形的宽度,有很大的局限性。例如,如果一组数据的值为2000,我们就不可能用2000个像素来表示矩形的宽度,因为画布没有那么长。此时,我们需要将一个区域的值映射到另一个区域,在转换过程中大小关系保持不变。

//x轴刻度varxscale=d3.scalelinear()。域([0,d3.max (chartdata)])。范围([0,宽度]) 5。矩形和标签文本的容器,用于添加元素。当有数据但没有足够的图形元素时,可以使用以下链式方法添加足够的元素3360

选择。selectall(元素)。数据(数据)。输入()。追加(元素)//矩形和标签文本组合的容量var g=chartsvg。选择全部(' g ')。数据(图表数据)。输入()。追加(' g ')。attr ('transform ',函数(d,I) {return' translate (0,' I * barheight')'}) 6。添加矩形和标签文本

//添加矩形g.append ('rect ')。attr ('width ',xscale)。attr ('height ',barheight-2)。attr ('fill ',' green ')//添加标签文本g.append ('text ')。attr(')函数(d) {return xscale (d) 3})。attr ('y ',barheight-10)。attr ('dy ',' 0.3em ')。attr('填充','红色')。样式(' font-size ',' 12px。

使用此组件

如何使用我们定义的柱形图组件,分3步走:

1.进口进口

2.设置数据

3.通过属性值将其传递给子组件

基础条形图: chart-data=' barchart . data ' : width=' barchart . width ' : bar-height=' barchart . barheight '/基础条形图-chart导入基础条形图自'./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-vue

摘要

以上是边肖介绍的带有D3.js Vue的简单柱形图,希望对大家有所帮助。如果你有任何问题,请给我留言,边肖会及时回复你的!

版权声明:用D3.js Vue实现简单的柱形图是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。