d3绘制基本的柱形图的实现代码
作者：winteraq
柱形图，是使用柱形的长短来表示数据变化的图表，也是最简单的图表之一。一般情况下，柱形图包括：矩形、坐标轴和文字。
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})`)
结果
总结
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")
结果
可以发现前两个矩形的填充颜色和数据并没有发生变化，后面的蓝色矩形为绑定数据后新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")
结果
结果发现前两个矩形不设置相关属性和值的情况下，也没有和数据集进行绑定，进行相关的可视化工作。
如果我们在绑定数据后立刻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")
结果
前两个矩形的颜色发生了改变。
现在我们改变一下数据集里面数据的个数，看看会发生什么情况？
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")
结果
我们发现如果数据集里数据的个数只有一个，那么只有第一个矩形的颜色会改变，第二个为默认的黑色。
那么如果在数据集不变的情况下，我们想改变第二个矩形的颜色该怎么做呢？
//这里我们使用exit()
svg.selectAll("rect")
.data(dataset)
.attr("fill","pink")
.exit()
.attr("fill","red")
结果
总结
1.当选择集中已经有了矩形，再进行绑定数据时，数据集中已经存在的矩形的数据不会根据数据集进行更新，会保持不变。
2.当选择集与数据集进行绑定是会出现以下情况：
（1）当选择集中的元素个数 小于 数据集中的元素个数，d3 会为多出来的 data 生成占位符，通过 enter() 处理之后就可以为这些占位符 append 元素。简单理解：enter（）后的元素需要继续进行可视化的工作。
（2）当选择集中的元素个数 大于 数据集中的元素个数，通过 exit() 处理之后返回多出来那部分数据的元素选择器(这时候接着执行 append 那就是在 rect 上 append rect 了)。简单理解：exit（）后返回的是一个选择集，即多出来的那部分元素。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。