本文参照了echarts罗列了几种常用的柱状图在d3中的画法

基本柱状图

使用d3直方图布局

  • d3的所有布局都不会帮你作图，只是帮你按需处理的数据。

  • 使用d3.randomBates构造一组1000个具有贝茨分布规律并且在1~0的随机数，使用d3.histogram()直方图布局处理数据。统计数据在每个x轴频段出现的频率。然后作出柱状图。

  • 处理后的数据

x0、x1：起始及终止的x坐标，length：出现的频数，数组里其他的即为在此频段的数据。


<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><div id="test-svg"></div></body><script src="https://d3js.org/d3.v5.js"></script><script>window.onload = function() {//创建具有贝茨分布规律的随机数,0~1var datas = d3.range(1000).map(function() {return d3.randomBates(10)();});var width = 800,height = 400,padding = {top: 10,right: 40,bottom: 40,left: 40};var svg = d3.select("#test-svg").append('svg').attr('width', width + 'px').attr('height', height + 'px');// x轴var xScale = d3.scaleLinear().range([padding.left, width - padding.right]);// 将x轴，0~1，轴分成20个刻度 [0,0.05,0.1,0.15 ...,1.00]var xAxis = d3.axisBottom().scale(xScale).ticks(20);svg.append('g').call(xAxis).attr("transform", "translate(0," + (height - padding.bottom) + ")");// 构造一个直方图布局,返回随机数在每个x轴刻度区域出现的次数var his = d3.histogram().domain(xScale.domain()).thresholds(xScale.ticks(20))(datas);// y轴var yScale = d3.scaleLinear().domain([0, d3.max(his,function(d) {return d.length;})]).range([height - padding.bottom, padding.top]);var yAxis = d3.axisLeft().scale(yScale).ticks(10);svg.append('g').call(yAxis).attr("transform", "translate(" + padding.left + ",0)");var bar = svg.selectAll(".bar").data(his).join("g").attr("class", "bar").attr("transform",function(d) {return "translate(" + xScale(d.x0) + "," + yScale(d.length) + ")";});// 构造柱bar.append("rect").attr("x", 1).attr("width", xScale(his[0].x1) - xScale(his[0].x0) - 1).attr("height",function(d) {return height - yScale(d.length) - padding.bottom;});bar.append("text").attr("dy", ".75em").attr("y", 6).attr("x", (xScale(his[0].x1) - xScale(his[0].x0)) / 2).attr("text-anchor", "middle").attr("font-size", "8px").attr("fill", "White").text(function(d) {return d.length;});}</script>
</html>

使用原始数据

  • 这里使用echarts Bar Simple的原始数据，和上述类似直接处理数据作图。


<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><div id="test-svg"></div></body><script src="https://d3js.org/d3.v5.js"></script><script>window.onload = function() {// 原始数据var datax = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];var datay = [120, 200, 150, 80, 70, 110, 130];var width = 800,height = 400,padding = {top: 10,right: 40,bottom: 40,left: 40};var svg = d3.select("#test-svg").append('svg').attr('width', width + 'px').attr('height', height + 'px');// x轴var xScale = d3.scaleOrdinal().domain(datax).range([100, 200, 300, 400, 500, 600, 700]);var xAxis = d3.axisBottom().scale(xScale);svg.append('g').call(xAxis).attr("transform", "translate(0," + (height - padding.bottom) + ")").selectAll("text").attr("dx", "50px");// y轴      var yScale = d3.scaleLinear().domain([0, d3.max(datay)]).range([height - padding.bottom, padding.top]);var yAxis = d3.axisLeft().scale(yScale).ticks(10);svg.append('g').call(yAxis).attr("transform", "translate(" + 100 + ",0)");var bar = svg.selectAll(".bar").data(datay).enter().append("g").attr("class", "bar").attr("transform", function(d, i) {return "translate(" + xScale(i * 100) + "," + yScale(d) + ")";});bar.append("rect").attr("x", 1).attr("width", 100).attr("height", function(d) {return height - yScale(d) - padding.bottom;}).attr("stroke", "White");bar.append("text").attr("dy", ".75em").attr("y", 6).attr("x", 50).attr("text-anchor", "middle").attr("font-size", "8px").attr("fill", "White").text(function(d) {return d;});}</script></html>

多柱图

在原来的基础上仿照echarts 添加了图例和对应的点击事件。


<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><div id="test-svg"></div></body><script src="https://d3js.org/d3.v5.js"></script><script>window.onload = function() {var datax = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];var datay = [[120, 200, 150, 80, 70, 110, 130],[100, 100, 130, 70, 10, 120, 135],[160, 120, 120, 90, 20, 140, 130]];// 用来保存点击时的状态var legendStatus = [true, true, true];var width = 800,height = 400,padding = {top: 40,right: 40,bottom: 40,left: 40};var sp = d3.schemeSet2;var svg = d3.select("#test-svg").append('svg').attr('width', width + 'px').attr('height', height + 'px');// x轴var xScale = d3.scaleOrdinal().domain(datax).range([100, 200, 300, 400, 500, 600, 700]);var xAxis = d3.axisBottom().scale(xScale).tickSize(10);svg.append('g').call(xAxis).attr("transform", "translate(0," + (height - padding.bottom) + ")").selectAll("text").attr("dx", "50px");// y轴      var yScale = d3.scaleLinear().domain([0, d3.max(d3.merge([datay[0], datay[1], datay[2]]))]).range([height - padding.bottom, padding.top]);var yAxis = d3.axisLeft().scale(yScale).ticks(10);svg.append('g').call(yAxis).attr("transform", "translate(" + 100 + ",0)");// 这里使用了forEach 考虑到计算柱子偏移量可能会方便一点  也可以直接                   /*** * var container = svg.selectAll(".container") *                  .data(datay)*                  .join("g")*                  .attr("class", ".container");* */datay.forEach(function(item, index) {var bar = svg.selectAll(".bar" + index).data(item).enter().append("g").attr("class", "bar" + index).attr("transform", function(d, i) {var _d = (100 / datay.length) * (index);return "translate(" + (xScale(i * 100) + _d) + "," + yScale(d) + ")";});// 柱bar.append("rect").attr("x", 1).attr("width", (100 / datay.length)).attr("height", function(d) {return height - yScale(d) - padding.bottom;}).attr("stroke", "White").attr("fill", sp[index]);bar.append("text").attr("dy", ".75em").attr("y", 6).attr("x", 100 / (datay.length * 2)).attr("text-anchor", "middle").attr("font-size", "8px").attr("fill", "White").text(function(d) {return d;});// 图例var legend = svg.append('g');var line = legend.append('line').attr('x1', 0).attr('y1', 2).attr('x2', 15).attr('y2', 2).attr('stroke', sp[index]).attr('stroke-width', 5);var text = legend.append('text').attr('class', 'legend-label').attr("dy", -13).style("text-anchor", "start").text("data" + index).attr('fill', "Black").attr('font-size', '13').attr("transform", "translate(" + 18 + "," + 20 + ")");// 图例对应的点击事件    legend.attr("transform", "translate(" + (padding.left * 3 + index * 100) + "," + padding.top / 2 + ")").on("click", function() {var _this = d3.select(this);var _i = parseInt(_this.select("text").text().split("data")[1]);if(legendStatus[_i]) {_this.selectAll("line").attr("stroke", "#d3d3d3");_this.selectAll("text").attr("fill", "#d3d3d3");svg.selectAll(".bar" + _i).attr("display", "none");} else {_this.selectAll("line").attr("stroke", sp[_i]);_this.selectAll("text").attr("fill", "#Black");svg.selectAll(".bar" + _i).attr("display", "show");}legendStatus[_i] = !legendStatus[_i];});});}</script></html>

堆叠柱状图

  • 使用了d3.stack()堆叠布局来处理原始数据，然后作图。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><div id="test-svg"></div></body><script src="https://d3js.org/d3.v5.js"></script><script>window.onload = function() {var data = [{apples: 3840,bananas: 1920,cherries: 960,dates: 400}, {apples: 1600,bananas: 1440,cherries: 960,dates: 400}, {apples: 640,bananas: 960,cherries: 640,dates: 400}, {apples: 320,bananas: 480,cherries: 640,dates: 400}];var width = 800,height = 400,padding = {top: 40,right: 40,bottom: 40,left: 40};var colors = d3.schemeSet2;var svg = d3.select("#test-svg").append('svg').attr('width', width + 'px').attr('height', height + 'px');// 使用堆叠布局处理数据var stack = d3.stack().keys(["apples", "bananas", "cherries", "dates"]).order(d3.stackOrderNone).offset(d3.stackOffsetNone);var series = stack(data);// x轴var xScale = d3.scaleOrdinal().domain(series.map(function(d) {return d.key;})).range([100, 200, 300, 400]);var xAxis = d3.axisBottom().scale(xScale).tickSize(10);svg.append('g').call(xAxis).attr("transform", "translate(0," + (height - padding.bottom) + ")").selectAll("text").attr("font-size", "10px").attr("dx", "50px");// 求出y轴最大值var maxNum = d3.max(series,function(d) {return d3.max(d,function(dd) {return dd[1];})});// y轴   var yScale = d3.scaleLinear().domain([0, maxNum]).range([height - padding.bottom, padding.top]);var yAxis = d3.axisLeft().scale(yScale).ticks(10);svg.append('g').call(yAxis).attr("transform", "translate(" + 100 + ",0)");// 画柱var bar = svg.selectAll(".bar").data(series).join("g").attr("class", "bar").selectAll("rect").data(function(d) {return d;});bar.join("rect").attr("x", 1).attr("width", 100).attr("height",function(d, i) {return height - yScale(d[1] - d[0]) - padding.bottom;}).attr("transform",function(d, i) {return "translate(" + xScale(i * 100) + "," + yScale(d[1]) + ")";}).attr("stroke", "White").attr("fill",function(d, i) {return colors[i];});bar.join("text").attr("dy", ".75em").attr("y", 6).attr("x", 50).attr("text-anchor", "middle").attr("font-size", "8px").attr("fill", "White").text(function(d) {return d[1] - d[0];}).attr("transform",function(d, i) {return "translate(" + xScale(i * 100) + "," + yScale(d[1]) + ")";});}</script></html>

转载于:https://www.cnblogs.com/chenjy1225/p/10982481.html

d3 几种常用的柱状图相关推荐

  1. R 实战| 几种常用的绘制离散变量热图/方块图/华夫图的方法

    R 实战| 几种常用的绘制离散变量热图/方块图/华夫图的方法 前言 常用方法 geom_tile ggwaffle ComplexHeatmap 总结 参考 往期 前言 多组学文章经常出现非连续变量的 ...

  2. MATLAB的几种常用出图方式

    MATLAB的几种常用出图方式 最近写文经常使用MATLAB绘图.出图,略作总结以备以后使用. 一.图片来源-MATLAB绘图或者读取文件 1.绘图 绘图不写了,根据需要选取函数作图吧,这里给个简单的 ...

  3. html脚本语言居中,web前端：CSS--几种常用的水平垂直居中对齐方法

    层叠样式表(英文全称:CascadingStyleSheets)是一种用来表现html(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.css不仅可以静态地修 ...

  4. C#的6种常用集合类大比拼【月儿原创】

    C#的6种常用集合类大比拼 作者:清清月儿 主页:http://blog.csdn.net/21aspnet/           时间:2007.6.27 说明:MSDN没有说出几种集合类其间的区别 ...

  5. 基于 Python 的 8 种常用抽样方法

    抽样是统计学.机器学习中非常重要,也是经常用到的方法,因为大多时候使用全量数据是不现实的,或者根本无法取到.所以我们需要抽样,比如在推断性统计中,我们会经常通过采样的样本数据来推断估计总体的样本. 上 ...

  6. 详细介绍！Linux 上几种常用的文件传输方式

    点击上方"方志朋",选择"设为星标" 做积极的人,而不是积极废人 责编:乐乐 来源:https://dwz.cn/VWIHhsOw 昨天发布一篇Linux文章( ...

  7. CCTextFieldTTF 与 5种常用CCMenuItem

    //继承(class HelloWorld : public cocos2d::CCLayer, public cocos2d::CCTextFieldDelegate) CCTextFieldTTF ...

  8. 网页html文档头部声明的两种常用模式

    Html文档头部声明的两种常用模式 第一种,XHTML1.0严格模式,对很多废除的标签不支持,书写要严格遵守W3C的要求,是找虐的好方法: <!DOCTYPE html PUBLIC " ...

  9. Android中五种常用的menu

    Android Menu在手机的应用中起着导航的作用,作者总结了5种常用的Menu. 1.左右推出的Menu 前段时间比较流行,我最早是在海豚浏览器中看到的,当时耳目一新.最早使用左右推出菜单的,听说 ...

最新文章

  1. Codeforces 1254C/1255F Point Ordering (交互题)
  2. java怎么插入oracle数据库timenstamp,Sybase数据库技术，数据库恢复专家
  3. Codeforces 474C Captain Marmot 给定4个点和各自旋转中心 问旋转成正方形的次数
  4. 蓝桥杯2017初赛-9数算式-dfs
  5. 51Nod 1105 第K大的数 二分答案
  6. 电脑端音乐播放器html5,分享|5 个很酷的音乐播放器
  7. python3 源码_7. Python3源码—Dict对象-阿里云开发者社区
  8. 【网络流24题】【LOJ6013】负载平衡（环形纸牌均分，最小费最大流）
  9. c语言蛮力法实现背包问题
  10. 端口映射公网IP访问内网服务器
  11. 计算机主机的输出设备,计算机的输出设备有哪些呢？
  12. echarts pie 饼图 border宽度
  13. vcard 文件数据格式
  14. 联想集团：联想，还是可以联想的
  15. 计算机求导方法：自动微分(Automatic Differentiation)
  16. jquery循环获取div之间的内容
  17. Trac 经验谈之（5）插件篇
  18. python-flask-制作网页入门1
  19. opencv与C++实现最大类间方差法（OTSU）进行图像二值化
  20. Android录屏分析（Android12源码）

热门文章

  1. Ngrok反向代理实现外网访问内网
  2. 高性能利器：CDN我建议你好好学一下！
  3. 2020年全国硕士研究生入学统一考试管理类专业学位联考英语（二）试题
  4. 写一个微信朋友圈的测试用例
  5. Mac重置dock置默认设置
  6. Java面试--线程同步方法
  7. python类的定义与实例化
  8. 计算机设备驱动的作用,浅谈电脑驱动程序的工作原理 详解电脑驱动程序意义...
  9. Prophet安装教程
  10. Linux下安装DM数据库及SrpingBoot+druid连接DM数据库