d3绘制基本的柱形图的实现代码

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

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

绘制画布

import * as d3 from "d3"; var width=300;//svg画布宽 var height=200;//svg画布高 //定义画布 var svg=d3.select("body") .append("svg") .attr("width",width) .attr("height",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",`translate(0,${-40})`) svg.append("rect") .attr("width",rectWidth-2) .attr("height",20) .attr("x",rectWidth) .attr("y",200) .attr("transform",`translate(0,${-20})`)

结果

d3绘制基本的柱形图的实现代码


总结

1.画布上的坐标轴方向:

x轴方向为水平向右;

y轴方向为垂直向下;

2.矩形的基本属性:

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

width,height分别对应矩形的宽和高;

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

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

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

绑定数据

var dataset=[45,70,12,79,4,127,33,90]; svg.selectAll("rect") .data(dataset) // .attr("fill","white") .enter() .append("rect") .attr("width",rectWidth-2) .attr("height",function (d,i) { return d }) .attr("x",function (d,i) { return rectWidth*i }) .attr("y",200) .attr("transform",function (d,i) { return `translate(0,${-d})` }) .attr("fill","blue")

结果

d3绘制基本的柱形图的实现代码

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

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

svg.append("rect") svg.append("rect") var dataset=[45,70,12,79,4,127,33,90]; svg.selectAll("rect") .data(dataset) // .attr("fill","white") .enter() .append("rect") .attr("width",rectWidth-2) .attr("height",function (d,i) { return d }) .attr("x",function (d,i) { return rectWidth*i }) .attr("y",200) .attr("transform",function (d,i) { return `translate(0,${-d})` }) .attr("fill","blue")

结果

d3绘制基本的柱形图的实现代码

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

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

svg.append("rect") .attr("width",rectWidth-2) .attr("height",40) .attr("x",0) .attr("y",200) .attr("transform",`translate(0,${-40})`) svg.append("rect") .attr("width",rectWidth-2) .attr("height",20) .attr("x",rectWidth) .attr("y",200) .attr("transform",`translate(0,${-20})`) var dataset=[45,70,12,79,4,127,33,90]; svg.selectAll("rect") .data(dataset) .attr("fill","pink") .enter() .append("rect") .attr("width",rectWidth-2) .attr("height",function (d,i) { return d }) .attr("x",function (d,i) { return rectWidth*i }) .attr("y",200) .attr("transform",function (d,i) { return `translate(0,${-d})` }) .attr("fill","blue")

结果

d3绘制基本的柱形图的实现代码

前两个矩形的颜色发生了改变。

现在我们改变一下数据集里面数据的个数,看看会发生什么情况?

var dataset=[45]; //,70,12,79,4,127,33,90 svg.selectAll("rect") .data(dataset) .attr("fill","pink") .enter() .append("rect") .attr("width",rectWidth-2) .attr("height",function (d,i) { return d }) .attr("x",function (d,i) { return rectWidth*i }) .attr("y",200) .attr("transform",function (d,i) { return `translate(0,${-d})` }) .attr("fill","blue")

结果

d3绘制基本的柱形图的实现代码

我们发现如果数据集里数据的个数只有一个,那么只有第一个矩形的颜色会改变,第二个为默认的黑色。

那么如果在数据集不变的情况下,我们想改变第二个矩形的颜色该怎么做呢?

//这里我们使用exit() svg.selectAll("rect") .data(dataset) .attr("fill","pink") .exit() .attr("fill","red")

结果

d3绘制基本的柱形图的实现代码

总结

1.当选择集中已经有了矩形,再进行绑定数据时,数据集中已经存在的矩形的数据不会根据数据集进行更新,会保持不变。

2.当选择集与数据集进行绑定是会出现以下情况:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/8bf2b9a155304aa6c71c6653eea1aea9.html