D3

最新推荐文章于 2021-05-28 09:03:33 发布

BEconfidence

最新推荐文章于 2021-05-28 09:03:33 发布

阅读量477

点赞数

分类专栏： D3

本文链接：https://blog.csdn.net/a197p/article/details/78406941

版权

D3 专栏收录该内容

22 篇文章 3 订阅

订阅专栏

<html>
	<head>
		<meta charset="utf-8">
		<title>HelloWorld</title>
	</head>
	<body>
		<p>Hello World 1</p>
		<p>Hello World 2</p>
			<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
			<script>
			d3.select("body").selectAll("p").text("www.decembercafe.org");
			var p = d3.select("body")
			.selectAll("p")
			.text("www.ourd3js.com");
			
			p.style("color","red")
			.style("font-size","72px");
			</script>
	</body>
</html>

2.绑定数据datum

<html>
	<head>
		<meta charset="utf-8">
		<title>HelloWorld</title>
	</head>
	<body>
		<p>Apple</p>
		<p>Pear</p>
		<p>Banana</p>
			<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
			<script>
			var dataset=["I like dogs","I like cats","I like snakes"];
			var body =d3.select("body");
			var p=body.selectAll("p");
			
			p.datum(dataset)
			.text(function(d,i){
				return d;
			});
			</script>
	</body>
</html>

3.data

<html>
	<head>
		<meta charset="utf-8">
		<title>HelloWorld</title>
	</head>
	<body>
		<p>Apple</p>
		<p>Pear</p>
		<p>Banana</p>
			<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
			<script>
			var dataset=["I like dogs","I like cats","I like snakes"];
			var body =d3.select("body");
			var p=body.selectAll("p");
			
			p.data(dataset)
			.text(function(d,i){
				return d;
			});
			</script>
	</body>
</html>

4.选择元素

<html>
	<head>
		<meta charset="utf-8">
		<title>HelloWorld</title>
	</head>
	<body>
		<p>Apple</p>
		<p id="myid">Pear</p>
		<p>Banana</p>
			<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
			<script>
			var body=d3.select("body");
			var p1 = body.selectAll("p");
			
			p1.style("color","red");
			
			var p2=body.select("#myid");
			p2.style("color","blue");
			</script>
	</body>
</html>

5.插入和删除

<html>
	<head>
		<meta charset="utf-8">
		<title>HelloWorld</title>
	</head>
	<body>
		<p>Apple</p>
		<p id="myid">Pear</p>
		<p>Banana</p>
			<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
			<script>
			var body=d3.select("body");
			body.append("p")
				.text("append p element");
			body.insert("p","#myid")
			.text("insert p element");
			var p=body.select("#myid");
			p.remove();
			</script>
	</body>
</html>

6.柱形图

<html>
	<head>
		<meta charset="utf-8">
		<title>HelloWorld</title>
	</head>
	<body>
			<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
			<script>
			var width=1900;
			var height=1900;
			var svg=d3.select("body")
			.append("svg")
			.attr("width",width)
			.attr("height",height);
			
			var dataset=[950,910,970,930,990];
			var rectHeight=25;
			svg.selectAll("rect")
			.data(dataset)
			.enter()
			.append("rect")
			.attr("x",20)
			.attr("y",function(d,i){
				return i*rectHeight;
			})
			.attr("width",function(d){
				return d;
			})
			.attr("height",rectHeight-2)
			.attr("fill","steelblue");
			
			
		
			</script>
	</body>
</html>

7.比例尺

线性比例尺：

<html>
	<head>
		<meta charset="utf-8">
		<title>HelloWorld</title>
	</head>
	<body>
		<p>Banana</p>
			<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
			<script>
			var dataset = [1.2,2.3,0.9,1.5,3.3];
			var min=d3.min(dataset);
			var max=d3.max(dataset);
			var linear=d3.scale.linear()
			.domain([min,max])
			.range([0,300]);
			
			var body=d3.select("body").append("p").text(linear(2.3));
			linear(0.9);
			linear(2.3);
			linear(3.3);
		
			</script>
	</body>
</html>

序数比例尺：

<html>
	<head>
		<meta charset="utf-8">
		<title>HelloWorld</title>
	</head>
	<body>
		<p>Banana</p>
			<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
			<script>
			var index=[0,1,2,3,4];
			var color = ["red","blue","green","yellow","black"];
			var ordinal=d3.scale.ordinal()
			.domain(index)
			.range(color);
			var body=d3.select("body").append("p").text(ordinal(0));
		
			</script>
	</body>
</html>

柱形比例尺

<html>
	<head>
		<meta charset="utf-8">
		<title>HelloWorld</title>
	</head>
	<body>
		<p>Banana</p>
			<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
			<script>
			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 rectHeight=25;
			
			var width=300;
			var height=300;
			var svg=d3.select("body")
			.append("svg")
			.attr("width",width)
			.attr("height",height);
			
			svg.selectAll("rect")
			.data(dataset)
			.enter()
			.append("rect")
			.attr("y",20)
			.attr("x",function(d,i){
				return i*rectHeight;
			})
			.attr("height",function(d){
				return linear(d);
			})
			.attr("width",rectHeight-2)
			.attr("fill","steelblue");
		
			</script>
	</body>
</html>

BEconfidence

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
D3

1. HelloWorld Hello World 1 Hello World 2 d3.select("body").selectAll("p").text("www.decembercafe.org"); var p = d3.select("body") .selectAll("p") .text("www.ourd3
复制链接

扫一扫

专栏目录

D3

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