D3-2

于 2017-11-01 15:29:38 发布
阅读量397 收藏
点赞数
分类专栏： D3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/a197p/article/details/78410630
版权

1.坐标轴

<html>
	<head>
		<meta charset="utf-8">
		<title>HelloWorld</title>
	</head>
<style>
.axis path,
.axis line{
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;
}

.axis text{
	font-family: sans-serif;
	font-size: 11px;
}
</style>


	<body>
		
			<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
			<script>
			var width=300;
			var height=300;
			
			var svg=d3.select("body")
			.append("svg")
			.attr("width",width)
			.attr("height",height);
			
			var dataset=[2.5,2.1,1.7,1.3,0.9];
			var linear=d3.scale.linear()
			.domain([0,d3.max(dataset)])
			.range([0,250]);
			
			var linear2=d3.scale.linear()
			.domain([0,2.5])
			.range([128,0]);
			
			var rectHeight=25;
			
			
			svg.selectAll("rect")
			.data(dataset)
			.enter()
			.append("rect")
			.attr("x",40)
			.attr("y",function(d,i){
				return i*rectHeight+2;
			})
			.attr("width",function(d){
				return linear(d);
			})
			.attr("height",rectHeight-2)
			.attr("fill","steelblue");
			
			var axis=d3.svg.axis()
			.scale(linear)
			.orient("bottom")
			.ticks(7);
			
			var ayis=d3.svg.axis()
			.scale(linear2)
			.orient("left")
			.ticks(7);
			
			
			svg.append("g")
			.attr("class","axis")
			.attr("transform","translate(40,130)")
			.call(axis);
			
			svg.append("g")
			.attr("class","axis")
			.attr("transform","translate(40,2)")
			.call(ayis);
			
			
			</script>
	</body>
</html>

2.完整的柱形图 

<html>
	<head>
		<meta charset="utf-8">
		<title>HelloWorld</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;
			
			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;
			});
			
			svg.append("g")
			.attr("class","axis")
			.attr("transform","translate("+padding.left+","+(height-padding.bottom)+")")
			.call(xAxis);
			
			svg.append("g")
			.attr("class","axis")
			.attr("transform","translate("+padding.left+","+padding.top+")")
			.call(yAxis);
			</script>
	</body>
</html>
3.
动态： 

<html>
	<head>
		<meta charset="utf-8">
		<title>HelloWorld</title>
	</head>
<style>

</style>


	<body>
		
			<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
			<script>
			var width=400;
			var height=400;
			
			var svg=d3.select("body")
			.append("svg")
			.attr("width",width)
			.attr("height",height);
			
			var circle1=svg.append("circle")
			.attr("cx",100)
			.attr("cy",100)
			.attr("r",45)
			.style("fill","green");
			
			circle1.transition()
			.duration(1000)
			.attr("cx",300);
			
			var circle2=svg.append("circle")
			.attr("cx",100)
			.attr("cy",100)
			.attr("r",45)
			.style("fill","green");
			
			circle2.transition()
			.duration(1500)
			.attr("cx",300)
			.style("fill","red");
			
			var circle3=svg.append("circle")
			.attr("cx",100)
			.attr("cy",100)
			.attr("r",45)
			.style("fill","green");
			
			circle3.transition()
			.duration(2000)
			.ease("bounce")
			.attr("cx",300)
			.style("fill","yellow")
			.attr("r",35);
			</script>
	</body>
</html>

柱状图动态： 

<html>
	<head>
		<meta charset="utf-8">
		<title>HelloWorld</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;
			
			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){
			var min=yScale.domain()[0];
			return yScale(min);
		})
		.transition()
		.delay(function(d,i){
			return i*200;
		})
		.duration(2000)
		.ease("bounce")
		.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;
			});
			
			svg.append("g")
			.attr("class","axis")
			.attr("transform","translate("+padding.left+","+(height-padding.bottom)+")")
			.call(xAxis);
			
			svg.append("g")
			.attr("class","axis")
			.attr("transform","translate("+padding.left+","+padding.top+")")
			.call(yAxis);
			</script>
	</body>
</html>
4.update 和 enter的使用 

<html>
	<head>
		<meta charset="utf-8">
		<title>HelloWorld</title>
	</head>
<style>


</style>


	<body>
		<p>1</p>
		<p>2</p>
		<p>3</p>
			<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
			<script>
			var dataset=[3,6,9,12,15];
			var p=d3.select("body").selectAll("p");
			
			var update=p.data(dataset);
			var enter=update.enter();
			
			update.text(function(d){
				return "update"+d;
			});
			
			enter.append("p")
			.text(function(d){
				return "enter" + d;
			});
			</script>
	</body>
</html>

Update 和 Exit 的使用 
<html>
	<head>
		<meta charset="utf-8">
		<title>HelloWorld</title>
	</head>
<style>


</style>


	<body>
		<p>1</p>
		<p>2</p>
		<p>3</p>
			<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
			<script>
			var dataset=[3];
			var p=d3.select("body").selectAll("p");
			
			var update=p.data(dataset);
			var exit=update.exit();
			
			update.text(function(d){
				return "update"+d;
			});
			
			enter.exit(function(d){
				return "exit";
			});
			</script>
	</body>
</html>

5.交互式柱形图 

<html>
	<head>
		<meta charset="utf-8">
		<title>HelloWorld</title>
	</head>
<style>
.axis path,
.axis line{
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;
}

.axis text{
	font-family: sans-serif;
	font-size: 11px;
}
.MyRect{
	
}
.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;
			
			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);
		})
		.attr("fill","steelblue") 
		.on("mouseover",function(d,i){
			d3.select(this)
			.attr("fill","yellow");
		})
		.on("mouseout",function(d,i){
			d3.select(this)
			.transition()
			.duration(500)
			.attr("fill","steelblue");
		});

			
		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;
			});
			
			svg.append("g")
			.attr("class","axis")
			.attr("transform","translate("+padding.left+","+(height-padding.bottom)+")")
			.call(xAxis);
			
			svg.append("g")
			.attr("class","axis")
			.attr("transform","translate("+padding.left+","+padding.top+")")
			.call(yAxis);
			</script>
	</body>
</html>
6.饼图 

<html>
	<head>
		<meta charset="utf-8">
		<title>HelloWorld</title>
	</head>
<style>
.axis path,
.axis line{
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;
}

.axis text{
	font-family: sans-serif;
	font-size: 11px;
}
.MyRect{
	
}
.MyText{
	fill:white;
	text-anchor:middle;
}

</style>


	<body>
		
			<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
			<script>
			var dataset=[30,10,43,55,13];
			var pie=d3.layout.pie();
			var piedata=pie(dataset);
			
			var outerRadius=150;
			var innerRadius=0;
			var arc=d3.svg.arc()
			.innerRadius(innerRadius)
			.outerRadius(outerRadius);
			
			
			var width=300;
			var height=300;
			var svg=d3.select("body")
			.append("svg")
			.attr("width",width)
			.attr("height",height);
			
			var arcs=svg.selectAll("g")
			.data(piedata)
			.enter()
			.append("g")
			.attr("transform","translate("+(width/2)+","+(width/2)+")");
			
			var color=d3.scale.category10();
			
			arcs.append("path")
			.attr("fill",function(d,i){
				return color(i);
			})
			.attr("d",function(d){
				return arc(d);
			})
			
			arcs.append("text")
			.attr("transform",function(d){
				return "translate("+arc.centroid(d)+")";
			})
			.attr("text-anchor","middle")
			.text(function(d){
				return d.data;
			});
			</script>
	</body>
</html>
7.力导向图 

<html>
	<head>
		<meta charset="utf-8">
		<title>HelloWorld</title>
	</head>
<style>


</style>


	<body>
		
			<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
			<script>
			var nodes = [ { name: "桂林" }, { name: "广州" },
              { name: "厦门" }, { name: "杭州" },
              { name: "上海" }, { name: "青岛" },
              { name: "天津" } ];
 
				var edges = [ { source : 0 , target: 1 } , { source : 0 , target: 2 } ,
               { source : 0 , target: 3 } , { source : 1 , target: 4 } ,
               { source : 1 , target: 5 } , { source : 1 , target: 6 } ];
			   
			   var width=400;
			   var height=400;
			   
			   var svg=d3.select("body")
			   .append("svg")
			   .attr("width",width)
			   .attr("height",height);
			   
			   var force=d3.layout.force()
			   .nodes(nodes)
			   .links(edges)
			   .size([width,height])
			   .linkDistance(150)
			   .charge([-400]);
			   
			   force.start();
			   
			   var svg_edges=svg.selectAll("line")
			   .data(edges)
			   .enter()
			   .append("line")
			   .style("stroke","#ccc")
			   .style("stroke-width",1);
			   
			   var color=d3.scale.category20();
			   
			   var svg_nodes=svg.selectAll("circle")
			   .data(nodes)
			   .enter()
			   .append("circle")
			   .attr("r",20)
			   .style("fill",function(d,i){
				return color(i);
			   })
			   .call(force.drag);
			   
			   var svg_texts=svg.selectAll("text")
			   .data(nodes)
			   .enter()
			   .append("text")
			   .style("fill","black")
			   .attr("dx",20)
			   .attr("dy",8)
			   .text(function(d){
				return d.name;
			   });
			   
			   force.on("tick",function(){
					svg_edges.attr("x1",function(d){return d.source.x;})
					.attr("y1",function(d){return d.source.y;})
					.attr("x2",function(d){return d.target.x;})
					.attr("y2",function(d){return d.target.y;})
					
					svg_nodes.attr("cx",function(d){return d.x;})
					.attr("cy",function(d){return d.y;})
					
					svg_texts.attr("x",function(d){return d.x;})
					.attr("y",function(d){return d.y;});
			   })
			</script>
	</body>
</html>


8.地图 需要搭建服务器 

<html>
	<head>
		<meta charset="utf-8">
		<title>HelloWorld</title>
	</head>
<style>


</style>


	<body>
		
			<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
			<script>
			var width=1000;
			var height=1000;
			
			var svg=d3.select("body").append("svg")
			.attr("width",width)
			.attr("height",height)
			.append("g")
			.attr("transform","translate(0,0)");
			
			var projection=d3.geo.mercator()
			.center([107,31])
			.scale(850)
			.translate([width/2,height/2]);
			
			var path=d3.geo.path()
			.projection(projection);
			
			d3.json("china.geojson",function(error,root){
				if(error)return console.error(error);
				console.log(root.features);
				
				svg.selectAll("path")
				.data(root.features)
				.enter()
				.append("path")
				.attr("stroke","#000")
				.attr("stroke-width",1)
				.attr("fill",function(d,i){
					return color(i);
				})
				.attr("d",path)
				.on("mouseover",function(d,i){
					d3.select(this)
					.attr("fill","yellow");
					})
					.on("mouseout",function(d,i){
						d3.select(this)
						.attr("fill",color(i));
					})
			})
			</script>
	</body>
</html>



评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值