【D3.V3.js数据可视化系列教程】--（十）更自由的条形图

最新推荐文章于 2018-10-08 11:22:14 发布
最新推荐文章于 2018-10-08 11:22:14 发布
阅读量1k 收藏
点赞数
分类专栏： d3.js

1、添加一个矩形

//Width and height
 var w = 500;
 var h = 100;
  
 var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
 11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];
  
 //Create SVG element
 var svg = d3.select("body")
 .append("svg")
 .attr("width", w)
 .attr("height", h);
  
 svg.selectAll("rect")
 .data(dataset)
 .enter()
 .append("rect")
 .attr("x", 0)
 .attr("y", 0)
 .attr("width", 20)
 .attr("height", 100);

2、添加更多条

控制x坐标的起始位置（i*21）

//Width and height
 var w = 500;
 var h = 100;
  
 var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
 11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];
  
 //Create SVG element
 var svg = d3.select("body")
 .append("svg")
 .attr("width", w)
 .attr("height", h);
  
 svg.selectAll("rect")
 .data(dataset)
 .enter()
 .append("rect")
 .attr("x", function(d, i) {
 return i * 21; //Bar width of 20 plus 1 for padding
 })
 .attr("y", 0)
 .attr("width", 20)
 .attr("height", 100);

3、均匀的添加条-定条宽

除的方式(i * (w / dataset.length);)作为条和间隙的总宽度，在设置固定宽度小于总宽度，这时就会自然生成一个空白间隙

一句话：条的宽度固定，总宽-条宽=空白宽。空白宽取决于总宽，总宽取决于计算表达式(w / dataset.length）

//Width and height
 var w = 500;
 var h = 100;
 var barPadding = 1;
  
 var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
 11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];
  
 //Create SVG element
 var svg = d3.select("body")
 .append("svg")
 .attr("width", w)
 .attr("height", h);
  
 svg.selectAll("rect")
 .data(dataset)
 .enter()
 .append("rect")
 .attr("x", function(d, i) {
 return i * (w / dataset.length);
 })
 .attr("y", 0)
 .attr("width", 20)
 .attr("height", 100);

4、均匀的添加条-定间隙宽

一句话：间隙的宽度固定，总宽-空白宽=条宽。条宽取决于总宽（w / dataset.length - barPadding），总宽取决于计算表达式(w / dataset.length）

//Width and height
 var w = 500;
 var h = 100;
 var barPadding = 1;
  
 var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
 11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];
  
 //Create SVG element
 var svg = d3.select("body")
 .append("svg")
 .attr("width", w)
 .attr("height", h);
  
 svg.selectAll("rect")
 .data(dataset)
 .enter()
 .append("rect")
 .attr("x", function(d, i) {
 return i * (w / dataset.length);
 })
 .attr("y", 0)
 .attr("width", w / dataset.length - barPadding)
 .attr("height", 100);

5、条高

用条长-纵坐标（纵坐标是从上到下计算，即下方向为正）：h - (d * 4);

var w = 500;
 var h = 100;
 var barPadding = 1;
  
 var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
 11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];
  
 //Create SVG element
 var svg = d3.select("body")
 .append("svg")
 .attr("width", w)
 .attr("height", h);
  
 svg.selectAll("rect")
 .data(dataset)
 .enter()
 .append("rect")
 .attr("x", function(d, i) {
 return i * (w / dataset.length);
 })
 .attr("y", function(d) {
 return h - (d * 4);
 })
 .attr("width", w / dataset.length - barPadding)
 .attr("height", function(d) {
 return d * 4;
 });

6、颜色

用据数据集生成的动态RGB值填充：

attr("fill", function(d) {
 return "rgb(0, 0, " + (d * 10) + ")";

//Width and height
 var w = 500;
 var h = 100;
 var barPadding = 1;
  
 var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
 11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];
  
 //Create SVG element
 var svg = d3.select("body")
 .append("svg")
 .attr("width", w)
 .attr("height", h);
  
 svg.selectAll("rect")
 .data(dataset)
 .enter()
 .append("rect")
 .attr("x", function(d, i) {
 return i * (w / dataset.length);
 })
 .attr("y", function(d) {
 return h - (d * 4);
 })
 .attr("width", w / dataset.length - barPadding)
 .attr("height", function(d) {
 return d * 4;
 })
 .attr("fill", function(d) {
 return "rgb(0, 0, " + (d * 10) + ")";
 });

7、文本标记（可是数值）

指定XY的坐标

return i * (w / dataset.length) + (w / dataset.length - barPadding) / 2;

return h - (d * 4) + 14;

svg.selectAll("text")
 .data(dataset)
 .enter()
 .append("text")
 .text(function(d) {
 return d;
 })
 .attr("text-anchor", "middle")
 .attr("x", function(d, i) {
 return i * (w / dataset.length) + (w / dataset.length - barPadding) / 2;
 })
 .attr("y", function(d) {
 return h - (d * 4) + 14;
 })
 .attr("font-family", "sans-serif")
 .attr("font-size", "11px")
 .attr("fill", "white");

8、源码

[html] view plain copy print ?
  1. <!DOCTYPE html>  
  2. <html>  
  3.   <head>  
  4.         <meta charset="utf-8">  
  5.         <title>testD3-8-drawBar.html</title>  
  6.         <script type="text/javascript" src="http://localhost:8080/spring/js/d3.v3.js"></script>  
  7.     <style type="text/css">  
  8.         </style>  
  9.     </head>  
  10.     <body>  
  11.         <script type="text/javascript">  
  12. //Width and height  
  13.             var w = 500;  
  14.             var h = 100;  
  15.             var barPadding = 1;  
  16.               
  17.             var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,  
  18.                             11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];  
  19.               
  20.             //Create SVG element  
  21.             var svg = d3.select("body")  
  22.                         .append("svg")  
  23.                         .attr("width", w)  
  24.                         .attr("height", h);  
  25.   
  26.             svg.selectAll("rect")  
  27.                .data(dataset)  
  28.                .enter()  
  29.                .append("rect")  
  30.                .attr("x", function(d, i) {  
  31.                     return i * (w / dataset.length);  
  32.                })  
  33.                .attr("y", function(d) {  
  34.                     return h - (d * 4);  
  35.                })  
  36.                .attr("width", w / dataset.length - barPadding)  
  37.                .attr("height", function(d) {  
  38.                     return d * 4;  
  39.                })  
  40.                .attr("fill", function(d) {  
  41.                     return "rgb(0, 0, " + (d * 10) + ")";  
  42.                });  
  43.   
  44.             svg.selectAll("text")  
  45.                .data(dataset)  
  46.                .enter()  
  47.                .append("text")  
  48.                .text(function(d) {  
  49.                     return d;  
  50.                })  
  51.                .attr("text-anchor", "middle")  
  52.                .attr("x", function(d, i) {  
  53.                     return i * (w / dataset.length) + (w / dataset.length - barPadding) / 2;  
  54.                })  
  55.                .attr("y", function(d) {  
  56.                     return h - (d * 4) + 14;  
  57.                })  
  58.                .attr("font-family", "sans-serif")  
  59.                .attr("font-size", "11px")  
  60.                .attr("fill", "white");  
  61.         </script>  
  62.   
  63.     </body>  
  64. </html>  
<!DOCTYPE html>
<html>
  <head>
		<meta charset="utf-8">
		<title>testD3-8-drawBar.html</title>
		<script type="text/javascript" src="http://localhost:8080/spring/js/d3.v3.js"></script>
	<style type="text/css">
		</style>
	</head>
	<body>
		<script type="text/javascript">
//Width and height
			var w = 500;
			var h = 100;
			var barPadding = 1;
			
			var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
							11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];
			
			//Create SVG element
			var svg = d3.select("body")
						.append("svg")
						.attr("width", w)
						.attr("height", h);

			svg.selectAll("rect")
			   .data(dataset)
			   .enter()
			   .append("rect")
			   .attr("x", function(d, i) {
			   		return i * (w / dataset.length);
			   })
			   .attr("y", function(d) {
			   		return h - (d * 4);
			   })
			   .attr("width", w / dataset.length - barPadding)
			   .attr("height", function(d) {
			   		return d * 4;
			   })
			   .attr("fill", function(d) {
					return "rgb(0, 0, " + (d * 10) + ")";
			   });

			svg.selectAll("text")
			   .data(dataset)
			   .enter()
			   .append("text")
			   .text(function(d) {
			   		return d;
			   })
			   .attr("text-anchor", "middle")
			   .attr("x", function(d, i) {
			   		return i * (w / dataset.length) + (w / dataset.length - barPadding) / 2;
			   })
			   .attr("y", function(d) {
			   		return h - (d * 4) + 14;
			   })
			   .attr("font-family", "sans-serif")
			   .attr("font-size", "11px")
			   .attr("fill", "white");
		</script>

	</body>
</html>


 

9、效果

Harry_Burt
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
D3.js的V5版本-Vue框架中使用(第一章) ---SVG基础
空谷足音的博客
06-15 1849
1.基本概念viewport: 物理窗口viewbox: 实物窗口preserveAspectRatio: 保留横纵比(1) .viewport: 物理窗口 用 x,y,width,height。这 4 个属性，在页面上固定的矩形区域(2).viewbox: 实物窗口定义 SVG 元素在 viewport 中的具体尺寸比例列如：&lt;svg width="500" height="200" vi...
d3.js的关系图初试（附加拖拽、缩放及根据自定义名称确定节点）
qq_27971625的博客
08-04 9135
上次用的百度的echarts做的关系图，这周选择的是d3.js做的关系图。总体来看，echarts更简单一些，因为他的文档很容易，而d3的因为是外国的，所以文档阅读起来比较麻烦，即使有中文文档但是有些东西仍然要看英文的。但是因为echarts封装的很好，所以说要用起来就只能很规范化的做那一套了，而有些东西要进行自己设计就不行了，而d3就解决了这一点。就比如说连线上的箭头，echarts只能在连线的...
【D3.js数据可视化系列教程】--（十）更自由的条形图
司机大傻
09-08 1万+
更自由的条形图
【D3.V3.js数据可视化系列教程】--（五）用层画条形图
Harry_Burt的专栏
02-20 992
【D3.V3.js系列教程】--（五）用层画条形图 1、为同类层添加样式 div.bar { display: inline-block; width: 20px; height: 75px; /* We'll override this later */ background-color: teal; } 2、声明要为某类层设置属性 .attr("cl
【D3.js数据可视化系列教程】（十七）--通过键联结数据
司机大傻
11-02 7293
通过键联结数据
d3.js第七次人口普查可视化分析（含数据和源代码）
06-28
描述中提到，使用d3.js对数据进行处理并转化为各种图形，如折线图、饼状图和条形图，这些都是常见的数据可视化方式，便于人们直观地理解复杂的信息。这些图形用来展示人口普查中的关键指标，包括受教育程度、年龄...
精通D3.js：交互式数据可视化高级编程
08-10
本书是一个比较完整的D3.js教程，讲解了D3的所有重要的知识点，既有基础入门知识，又有相对深入的内容。有易到难，循序渐进，图文并茂，清晰易懂。
精通D3.js：交互式数据可视化高级编程1
08-03
《精通D3.js：交互式数据可视化高级编程1》是一本深入探讨D3.js库的指南，旨在帮助读者掌握创建动态、交互式数据可视化的技能。D3.js，全称Data-Driven Documents，是一个强大的JavaScript库，专为数据驱动的Web文档...
基于Javascript和D3.js的疫情可视化设计源码
最新发布
04-08
疫情可视化系统 - 基于Javascript和D3.js开发，包含28个文件，如JSON、CSV、JS、XML、GITIGNORE、CSS、SVG、LICENSE、IML和DS_STORE等。该系统使用D3.js完成中国疫情的可视化，包括中国地图的展示、使用brush的强...
D3.js数据可视化实战手册.pdf
08-09
D3.js数据可视化实战手册.pdf
D3.JS 纵向关系图(加箭头，连接线文字描述)
热门推荐
Denny辉的博客
07-25 1万+
&lt;script src="d3.js"&gt;&lt;/script&gt; &lt;style&gt; .node { font: 12px sans-serif; } .link { fill: none; stroke: #ccc; ...
D3.js 力导向图（气泡+线条+箭头+文字）
weixin_30405421的博客
09-23 1852
<!DOCTYPE html> <meta charset="utf-8"> <style> .link { fill: none; stroke: #666; stroke-width: 1.5px; } #licensing { fill: green; } .link.licensing { st...
d3.js学习笔记（四）力导向示意图
u012846041的专栏
10-08 708
d3.drawForceGraph = function () { var nodes = [{ name: "桂林" }, { name: "广州" }, { name: "厦门" }, { name: "杭州" }, { name: "上海" }, { name: "青岛" }, { name: "天
D3 force(力导向图)研究之二：如何布局超过十万个节点的图谱
甘焕的博客
05-29 1万+
基于SVG利用力导向图对节点进行布局，容易导致布局失败的原因有两个： 1. 计算节点位置耗费大量的CPU，导致页面操作冻结； 2. 添加DOM节点到SVG元素时，渲染、重绘会耗费大量的GPU，导致页面直接崩溃；针对以上的情况，可以采取如下策略： 1. 布局过程中，在页面只显示节点； 2. 布局过程中，在页面同时显示节点与连线； 3. 布局过程中不显示节点与连线，布局完成后显示； 4. 将
d3.js 画力导向图 带箭头 文字 方形节点 动态添加节点
老徐的博客
05-09 1万+
svg_coordinate.js  用于计算矩形与连线的交点位置 var coordinate = {}; /**  * 判断直线与水平线夹角  * @param x1 点1的x坐标  * @param y1 点1的y坐标  * @param x2 点2的x坐标  * @param y2 点2的y坐标  * @returns {number}角度  */ coordinate.findAng...
【D3.V3.js数据可视化系列教程】--（八）绘制SVG
Harry_Burt的专栏
02-20 1402
【D3.V3.js系列教程】--（八）绘制SVG 1、创建SVG [html] view plaincopyprint? //Width and height  var w = 500;  var h = 50;  var svg = d3.select("body")              .append("svg")              .attr("w
d3 坐标轴实现-散点图
03-10 4250
d3 坐标轴实现-散点图
数据可视化实战案例手册
10-18
内容包括Three.js Shader系列教程、D3.js数据可视化系列教程，以及各种可视化作品的分享和复现，旨在帮助读者提升数据可视化的实践技能。" 在当今数据驱动的世界里，数据可视化是至关重要的，它能够帮助我们理解...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值