d3js做的星条图+源码。

最新推荐文章于 2024-08-12 08:48:49 发布

置顶

商域无疆

最新推荐文章于 2024-08-12 08:48:49 发布

阅读量2.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript d3.js 文章标签： svg js d3js 源码数据可视化

本文链接：https://blog.youkuaiyun.com/omni360/article/details/38844859

本文展示了如何利用d3.js库制作一个生动的星条图，提供了详细的源码，帮助读者理解数据可视化的实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一个动态的星条图

style="width: 100%; height: 300px" src="http://sandbox.runjs.cn/show/yjsoswps" allowfullscreen="allowfullscreen" frameborder="0">

以下是源码。

<!DOCTYPE html>
<html>
<head>
	<title>d3 library example for scatter chart</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8">
	<meta name=description content="this is an d3 library example template">
	<meta name=viewport content="width=device-width, initial-scale=1">
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<style type="text/css">
	#tooltip{
		position: absolute;
		width: 200px;
		height: auto;
		padding:10px;
		background-color:white;
		-webkit-border-radius:10px;
		-moz-border-radius:10px;
		border-radius:10px;
		-webkit-box-shadow:4px 4px 10px rgba(0,0,0,0.4);
		-moz-box-shadow:4px 4px 10px rgba(0,0,0,0.4);
		box-shadow: 4px 4px 10px rgba(0,0,0,0.4);
		pointer-events:none;
	}
	#tooltip.hidden{
		display: none;
	}
	#tooltip p{
		margin:0;
		font-family: sans-serif;
		font-size: 16px;
		line-height: 20px;
	}
/* 	rect:hover{
	fill:orange;
	-moz-transition:all 0.3s;
	-o-transition: all 0.3s;
	-webkit-transition: all 0.3s;	
	transition: all 0.3s;
} */

	</style>
</head>
<body>

	<script type="text/javascript">
		var w = this.window.innerWidth;
		var h = this.window.innerHeight / 2;
		var barPandding = 1;

		var dataset=[
						{key: 0, value:  5},
						{key: 1, value:  10},
						{key: 2, value:  13},
						{key: 3, value:  19},
						{key: 4, value:  21},
						{key: 5, value:  25},
						{key: 6, value:  22},
						{key: 7, value:  18},
						{key: 8, value:  15},
						{key: 9, value:  13},
						{key: 10, value:  11},
						{key: 11, value:  12},
						{key: 12, value:  15},
						{key: 13, value:  20},
						{key: 14, value:  18},
						{key: 15, value:  17},
						{key: 16, value:  16},
						{key: 17, value:  18},
						{key: 18, value:  23},
						{key: 19, value:  25},
						{key: 20, value:  13},
						{key: 21, value:  19},
						{key: 22, value:  21},
						{key: 23, value:  25},
						{key: 24, value:  22},
						{key: 25, value:  18},
						{key: 26, value:  15},
						{key: 27, value:  13},
						{key: 28, value:  11},
						{key: 29, value:  12},
						{key: 30, value:  15},
						{key: 31, value:  20},
						{key: 32, value:  18},
						{key: 33, value:  17},
						{key: 34, value:  16},
						{key: 35, value:  18},
						{key: 36, value:  13},
						{key: 37, value:  19},
						{key: 38, value:  21},
						{key: 39, value:  25},
						{key: 40, value:  22},
						{key: 41, value:  18},
						{key: 42, value:  15},
						{key: 43, value:  13},
						{key: 44, value:  11},
						{key: 45, value:  12},
						{key: 46, value:  15},
						{key: 47, value:  20},
						{key: 48, value:  18},
						{key: 49, value:  17},
						{key: 50, value:  16},
						{key: 51, value:  18},
						{key: 52, value:  13},
						{key: 53, value:  19},
						{key: 54, value:  21}
					 ];

		var key = function(d){
			return d.key;
		};

		var xScale = d3.scale.ordinal()
			.domain(d3.range(dataset.length))
			.rangeRoundBands([0,w],0.05);

		var yScale = d3.scale.linear()
			.domain([0,d3.max(dataset,function(d){
				return d.value;
			})])
			.range([0,h*0.75]);

		//创建svg
		var svg = d3.select("body")
					.append("svg")
					.attr("width",w)
					.attr("height",h);

				//创建条形图	
		var bar = svg.selectAll("rect")
					.data(dataset,key)
					.enter()
					.append("rect")
					.attr("x",function(d,i){
						return xScale(i);
					})
					.attr("y",function(d){
						return h- yScale(d.value);
					})
					.attr("width",xScale.rangeBand())
					.attr("height",function(d){
						return yScale(d.value);
					})
					.attr("fill",function(d){
						return "rgb("+Math.floor(Math.random() * 256)+","+Math.floor(Math.random() * 255)+","+(d.value*10)+")";
					})
					.on("mouseover",function(d){
						d3.select(this)
							.attr("fill","orange");
						var xPosition = parseFloat(d3.select(this).attr("x")) + xScale.rangeBand() /2;
						var yPosition = parseFloat(d3.select(this).attr("y")) /2 + h/2;

						d3.select("#tooltip")
							.style("left",xPosition + "px")
							.style("top",yPosition +"px")
							.select("#value")
							.text(d.value);
						d3.select("#tooltip").classed("hidden",false);
					})

					.on("mouseout",function(d){
						d3.select(this)
							.transition()
							.duration(500)
							.attr("fill",function(d){
								return "rgb("+Math.floor(Math.random() * 256)+","+Math.floor(Math.random() * 255)+","+(d.value*10)+")";
							});
						d3.select("#tooltip").classed("hidden",true);
					})
					.on("click",function () {
						// 新数据集
						var numValues = dataset.length;
						var minkey = dataset[0].key;	
						var maxkey = dataset[dataset.length-1].key;	

						dataset = [];

						for (var i = minkey; i <= maxkey; i++) {
							var newNumber = Ma