时间:2021-05-28
柱形图,是使用柱形的长短来表示数据变化的图表,也是最简单的图表之一。一般情况下,柱形图包括:矩形、坐标轴和文字。
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.画布上的坐标轴方向:
2.矩形的基本属性:
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,90svg.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()后返回的是一个选择集,即多出来的那部分元素。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
最近想在Vue的项目里尝试使用d3.js,封装一些常用的图表。这里记录一下自己搭建项目的过程,以及实现一个简单的柱形图。不了解D3的请移步D3Data-Driv
本文实例讲述了JS插件amCharts实现绘制柱形图默认显示数值功能。分享给大家供大家参考,具体如下:使用amCharts.js绘制柱形图(columnchar
现在用D3.js+react做一个带坐标轴和比例尺的柱形图。我已经尽力把代码全部注释上了,最后我也会把完整柱形图代码奉上。如果还有疑惑的,可以去翻看一下我之前介
本文主要讲解如何使用python绘制三维的柱形图,如下图源代码如下:importnumpyasnpimportmatplotlib.pyplotaspltfro
簇状水平圆柱图是在:进入excel后,点击“插入”图表―里的柱形图,第一个就是“簇状柱形图”。簇状柱形图是一种常见的统计图表。 簇状柱形图分为组间柱形图和组内