d3怎么绘制基本的柱形图

　　介绍

这篇文章给大家分享的是有关d3怎么绘制基本的柱形图的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

柱形图,是使用柱形的长短来表示数据变化的图表,也是最简单的图表之一。一般情况下,柱形图包括:矩形,坐标轴和文字。

d3简单理解就是通过在svg画布上绘制基本图形,本文将介绍d3绘制基本的柱形图

<强>绘制画布

import  *, as  d3 得到“d3"; 　　var 宽度=300;//svg画布宽 　　var 身高=200;//svg画布高//定义画布 　　var  svg=d3.select (“body") 　　.append才能(“svg") 　　.attr才能(“width"、宽度) 　　.attr才能(“height"、高度) 　　.style才能(“background-color",“yellow")

<强>绘制矩形

var  rectWidth=30;//每个矩形的默认宽度 　　svg.append (“rect") 　　.attr (“width" rectWidth-2) 　　.attr (“height" 40) 　　.attr (“x", 0) 　　.attr (“y", 200) 　　.attr (“transform", '翻译(0,$ {-40})) 　　 　　svg.append (“rect") 　　.attr (“width" rectWidth-2) 　　.attr (“height", 20) 　　.attr (“x" rectWidth) 　　.attr (“y", 200) 　　.attr (“transform", '翻译(0,$ {-20}))

结果

d3怎么绘制基本的柱形图”> <br/> </p> <p>总结</p> <p> 1。画布上的坐标轴方向:</p> <ul类= <李>

x轴方向为水平向右;

<李>

y轴方向为垂直向下;

2。矩形的基本属性:

<李>

x, y分别对应矩形左上角的坐标轴;

<李>

宽度、高度分别对应矩形的宽和高;

<李>

(本示例的数据可视化通过高度来体现)

3。由于默认的y轴方向为垂直向下,所以为了绘制柱形图,我们需要通过attr矩形的变换属性对矩形进行翻转;

4。默认的矩形填充颜色为黑色;

<>强绑定数据

var 数据集=[79年45岁,70年,12日,4127年,33岁,90年); 　　svg.selectAll (“rect") 　　. data(数据集)//,.attr (“fill",“white") 　　.enter () 　　.append (“rect") 　　.attr (“width" rectWidth-2) 　　.attr (“height" function  (d i), { 　　,,return  d 　　}) 　　.attr (“x" function  (d i), { 　　,,return  rectWidth *我 　　}) 　　.attr (“y", 200) 　　.attr (“transform" function  (d i), { 　　return 才能,“翻译(0,$ {-})” 　　}) 　　.attr (“fill",“blue")

结果

d3怎么绘制基本的柱形图

可以发现前两个矩形的填充颜色和数据并没有发生变化,后面的蓝色矩形为绑定数据后新添加的元素;

如果前两个矩形我们不设置高度,是否会通过数据集绑定上相关数据呢?

svg.append (“rect") 　　svg.append (“rect") 　　var 数据集=[79年45岁,70年,12日,4127年,33岁,90年); 　　svg.selectAll (“rect") 　　. data(数据集)//,.attr (“fill",“white") 　　.enter () 　　.append (“rect") 　　.attr (“width" rectWidth-2) 　　.attr (“height" function  (d i), { 　　,,return  d 　　}) 　　.attr (“x" function  (d i), { 　　,,return  rectWidth *我 　　}) 　　.attr (“y", 200) 　　.attr (“transform" function  (d i), { 　　return 才能,“翻译(0,$ {-})” 　　}) 　　.attr (“fill",“blue")

结果

d3怎么绘制基本的柱形图

结果发现前两个矩形不设置相关属性和值的情况下,也没有和数据集进行绑定,进行相关的可视化工作。

如果我们在绑定数据后立刻attr矩形的属性呢?是否会有所改变呢?

svg.append (“rect") 　　.attr (“width" rectWidth-2) 　　.attr (“height" 40) 　　.attr (“x", 0) 　　.attr (“y", 200) 　　.attr (“transform", '翻译(0,$ {-40})) 　　 　　svg.append (“rect") 　　.attr (“width" rectWidth-2) 　　.attr (“height", 20) 　　.attr (“x" rectWidth) 　　.attr (“y", 200) 　　.attr (“transform", '翻译(0,$ {-20})) 　　 　　var 数据集=[79年45岁,70年,12日,4127年,33岁,90年); 　　 　　svg.selectAll (“rect") 　　. data(数据集) 　　.attr (“fill",“pink") 　　.enter () 　　.append (“rect") 　　.attr (“width" rectWidth-2) 　　.attr (“height" function  (d i), { 　　,,return  d 　　}) 　　.attr (“x" function  (d i), { 　　,,return  rectWidth *我 　　}) 　　.attr (“y", 200) 　　.attr (“transform" function  (d i), { 　　return 才能,“翻译(0,$ {-})” 　　}) 　　.attr (“fill",“blue")

d3怎么绘制基本的柱形图