d3js完整柱形图

最新推荐文章于 2024-05-03 18:08:38 发布
最新推荐文章于 2024-05-03 18:08:38 发布
阅读量1.8k 收藏
点赞数
分类专栏： 数据可视化之D3.js_学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hb707934728/article/details/56840757
版权

效果：

<html>  
<head>  
	<meta charset="utf-8">  
	<title>完整的柱形图</title>  
</head> 

<style>
	.axis path,
	.axis line{
		fill: none;
		stroke: black;
		shape-rendering: crispEdges;
	}

	.axis text {
		font-family: sans-serif;
		font-size: 11px;
	}

	.MyRect {
		fill: steelblue;
	}

	.MyText {
		fill: white;
		text-anchor: middle;
	}
</style>

<body>  
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>  
	<script>

	//画布大小
	var width = 400;
	var height = 400;

	//在 body 里添加一个 SVG 画布	
	var svg = d3.select("body")
		.append("svg")
		.attr("width", width)
		.attr("height", height);

	//画布周边的空白
	var padding = {left:30, right:30, top:20, bottom:20};

	//定义一个数组
	var dataset = [10, 20, 30, 40, 33, 24, 12, 5];
		
	//x轴的比例尺
	var xScale = d3.scale.ordinal()
		.domain(d3.range(dataset.length))
		.rangeRoundBands([0, width - padding.left - padding.right]);

	//y轴的比例尺
	var yScale = d3.scale.linear()
		.domain([0,d3.max(dataset)])
		.range([height - padding.top - padding.bottom, 0]);

	//定义x轴
	var xAxis = d3.svg.axis()
		.scale(xScale)
		.orient("bottom");
		
	//定义y轴
	var yAxis = d3.svg.axis()
		.scale(yScale)
		.orient("left");

	//矩形之间的空白
	var rectPadding = 4;

	//添加矩形元素
	var rects = svg.selectAll(".MyRect")
		.data(dataset)
		.enter()
		.append("rect")
		.attr("class","MyRect")
		.attr("transform","translate(" + padding.left + "," + padding.top + ")")
		.attr("x", function(d,i){
			return xScale(i) + rectPadding/2;
		} )
		.attr("y",function(d){
			return yScale(d);
		})
		.attr("width", xScale.rangeBand() - rectPadding )
		.attr("height", function(d){
			return height - padding.top - padding.bottom - yScale(d);
		});

	//添加文字元素
	var texts = svg.selectAll(".MyText")
		.data(dataset)
		.enter()
		.append("text")
		.attr("class","MyText")
		.attr("transform","translate(" + padding.left + "," + padding.top + ")")
		.attr("x", function(d,i){
			return xScale(i) + rectPadding/2;
		} )
		.attr("y",function(d){
			return yScale(d);
		})
		.attr("dx",function(){
			return (xScale.rangeBand() - rectPadding)/2;
		})
		.attr("dy",function(d){
			return 20;
		})
		.text(function(d){
			return d;
		});

	//添加x轴
	svg.append("g")
		.attr("class","axis")
		.attr("transform","translate(" + padding.left + "," + (height - padding.bottom) + ")")
		.call(xAxis); 
		
	//添加y轴
	svg.append("g")
		.attr("class","axis")
		.attr("transform","translate(" + padding.left + "," + padding.top + ")")
		.call(yAxis);

</script>  
</body>  
</html>

演示地址：http://runjs.cn/detail/fpgs51st

hb707934728
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
两分钟学会用js画动态表
weixin_49200148的博客
08-06 123
女大学生都能学会的js生成动态表
D3.js做一个简单的图表
GXing007的博客
10-30 1120
环境：vue 使用：npm install d3 --save-dev(检查是否安装成功在package.json查找d3) 然后在组件中引入：import * as d3 from 'd3' 柱形图是一种简单的可视化图表，主要有矩形，文字标签，坐标轴所组成。这里只绘制矩形部分，主要讲解如何使用d3在svg中绘图。 画布是什么？ HTML5提供两种强有力的"画布"，SVG和Canva...
使用D3.js进行数据可视化
最新发布
m0_73500130的博客
05-03 1409
D3.js是一个流行的JavaScript数据可视化库，全称为Data-Driven Documents，即数据驱动文档。它以数据为核心，通过数据来驱动文档的展示和操作。D3.js提供了丰富的API和工具，使得开发者能够创建出各种交互式和动态的数据可视化效果。
三维动态图
tttabcgy的博客
09-26 2366
http://blog.csdn.net/songjs19931206/article/details/43482415
18年写的D3动态条形图，再回首仿佛看到曾经那个热爱新技术爱尝试的自己
qq_39762109的博客
09-28 138
一、D3 ：javascript的函数库，可视化图表 D3选择器 select：是选择所有指定元素的第一个，selectAll：是选择指定元素的全部 || 选择集； D3主要采用链式语法 例如：d3.select().attr().style.() 不断地调用函数 二、数据绑定： (1)、datum： &lt;div class="box"&gt; &lt;...
如何绘制业务架构图 — 4.流程图
李鸿君专栏
12-06 2658
流程图，可以用来描述任何有顺序、有规则的活动过程。 流程图是业务架构三视图的最后一张，也是描写客户业务最为重要的一张架构图。 在企业管理的分析和设计中，主要涉及到的流程是业务流程与审批流程。流程是为达到特定目标而由不同人分别协同完成的一系列活动。活动之间不仅有严格的先后顺序限定，而且活动的内容、方式、责任等也都必须有明确的安排和界定，以使不同活动在不同岗位角色之间进行流转交接成为可能。流程图就是用来描述和记录这个活动过程的方法。 业务流程和审批流程，是两个不同的概念和功能： □ 业务流程表达的是“业务操作的
D3.js实现柱状图的方法详解
11-26
在本文中，我们将深入探讨如何使用D3.js库来实现柱状图的详细步骤。D3.js是一个强大的JavaScript库，它允许开发人员通过HTML、SVG和CSS将数据绑定到文档对象模型(DOM)，并借助数据驱动的方法进行DOM操作，从而为数据...
使用d3.js实现柱状图
06-14
使用d3.js实现柱状图使用d3.js实现柱状图使用d3.js实现柱状图使用d3.js实现柱状图
d3js绘制多系统柱形图
01-29
**D3.js绘制多系统柱形图详解** D3.js（Data-Driven Documents）是一个强大的JavaScript库，专门用于创建数据可视化的网页应用。它利用Web技术如SVG、HTML5和CSS，结合数据来操作DOM（Document Object Model），...
d3js流程图代码
04-09
**D3.js 流程图代码详解** D3.js（Data-Driven Documents）是一个强大的JavaScript库，用于在浏览器中操作...同时，D3.js不仅限于流程图，它在数据可视化的各种应用场景中都有广泛的应用，如折线图、柱状图、地图等。
d3.js柱状图
10-26
d3.js柱状图gif图片
5个亲测好用的基于javascript的开源网页流程图、结构图
05-25
可在客户端编辑节点 ，获取节点所有信息并显示，放大缩小视图，看见节点相关明细， 设置连线方式 ，能在现有节点上增加新的节点，能在框上移动节点位置，伸缩节点大小，在界面中拖动，拖入基本元素并布局，能分别编辑部分元素、新建、连接、删除节点，移动在节点上会变色，能拖动、复原拖动、勾选节点，能在某个区域内拖动节点，编辑节点上的信息，让节点分层显示，点击之后打勾，可设置箭头节点位置等，总之现在的流程图需要的功能应该都囊括了。
多个D3.js Force图完美demo（带样式）
06-21
多个D3.js Force图完美demo（带样式）
d3.js 好看的饼图，多层边框，装饰点
04-24
d3.js 好看酷炫的饼图，多层边框，装饰点，围绕饼图生成文字。多颜色文字
这是一个数据可视化项目能够将历史数据排名转化为动态柱状图图表
08-10
这是一个数据可视化项目，能够将历史数据排名转化为动态柱状图图表
用HTML5构建一个流程图绘制工具
weixin_34148456的博客
11-29 2232
2019独角兽企业重金招聘Python工程师标准>>> ...
使用Js和H5绘制流程图
热门推荐
Myth的博客
05-06 3万+
主要使用的项目 dagre-d3 | 详细文档 简化一下官方的一个demo为我所用 其中依赖的两个Js文件 https://d3js.org/d3.v4.min.js https://dagrejs.github.io/project/dagre-d3/latest/dagre-d3.js &lt;!doctype html&gt; &lt;meta charset...
js绘制流程图、图表------with mermaid.js
zjw0742的博客
11-25 5076
graph LR;     A--合并-->B;     A-->C;     B-->D;     C-->D;       mermaid.init({noteMargin: 10}, ".firstTest");
d3js添加柱状图添加xy轴坐标
07-13
要在d3js中添加柱状图并添加坐标轴，首先需要以下步骤： 1. 创建SVG元素：使用d3.select选择一个HTML元素，然后添加一个SVG元素，设置其宽度和高度。例如： var svg = d3.select("body") .append("svg") .attr(...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值