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

最近想尝试在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的简单柱形图，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你的！