d3.js学习1

时间 2019-11-13

标签 d3.js 学习栏目 JavaScript 繁體版

原文原文链接

《d3.js可视化实战手册》笔记javascript

官网：html

http://d3js.org/java

范例：git

https://github.com/mbostock/d3/wiki/Gallerygithub

引用：app

//在线引用
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
//或下载到本地
<head>
	<meta charset="utf-8">
	<title>D3.js galance</title>
	<script src="d3.min.js"></script>
</head>

开始：this

<body>
    <p id='target'></p>
    <script type="text/javascript">
        d3.select("p#target").text("Hello World!");
    </script>
</body>

d3.select实现单个元素选取htm

select.attr，读取/设置元素属性blog

<p id='target'></p>
<script type="text/javascript">
	var res=d3.select("p#target").attr("id");
	document.write(res);
</script>
//结果为target

<p></p>
<script type="text/javascript">
	d3.select("p").attr("id","p1");
	var res=d3.select("p").attr("id");
	document.write(res);
</script>
//将p的id设为p1，并输出p的id

select.classed，添加/删除元素类索引

<p class="p1"></p>
<script type="text/javascript">
	var res=d3.select("p").classed("p1");
	document.write(res);
</script>
//检测该元素是否属于p1类，返回布尔值

<p></p>
<script type="text/javascript">
	var res=d3.select("p").classed("p1",true);
</script>
//为P标签添加p1这个类

<p class="p1"></p>
<script type="text/javascript">
	d3.select("p").classed("p1",function(){return false;});
	var res=d3.select("p").classed("p1");
	document.write(res);
</script>
//为P标签移除p1这个类

select.style，样式选择器


<p></p>
<script type="text/javascript">
	var res=d3.select("p").style("font-size");
	document.write(res);
</script>
//输出p style的字号

<p></p>
<script type="text/javascript">
	var res=d3.select("p").style("font-size","16px");
	document.write(res);
</script>
//设定字号为16

select.text，选择或设置文本内容

<p>be my valentine</p>
<script type="text/javascript">
	var res=d3.select("p").text();
	document.write(res);
</script>
//选择文本内容

<p>be my valentine</p>
<script type="text/javascript">
	d3.select("p").text("be my darling");
	var res=d3.select("p").text(); 
	document.write(res);
</script>
//将原来的替换为新的

select.html，选择或更改元素内的html

<p>be my valentine</p>
<script type="text/javascript">
	var res=d3.select("p").html();
	document.write(res);
</script>
//获取p元素内容

<p>be my valentine</p>
<script type="text/javascript">
	d3.select("p").html("<b>be my darling</b>");
	var res=d3.select("p").html();
	document.write(res);
</script>
//设置标签中html的内容

多元素选择器

<div>div1</div></br>
<div>div2</div></br>
<div>div3</div></br>
<script type="text/javascript">
	d3.selectAll("div").style("border","2px solid blue");
</script>

多元素路由迭代选集（选取子元素）selectAll().each(function(d,i){//do sth})

<div></div></br>
<div></div></br>
<div></div></br>
<script type="text/javascript">
	d3.selectAll("div")
	.style("border","2px solid blue")
	.each(function(d,i){
		d3.select(this).append("h1").text(i);
	})
</script>

each方法包括两个可选参数d & i，以及一个隐含参数this, this指向当前DOM引用的元素，d表示当前元素数据绑定，i表示索引值，0开始，递增1.

1. 初学d3.js (1);
2. D3.js学习（一）
3. d3.js学习4
4. D3.js学习（五）
5. D3.js学习（四）
6. d3.js学习8
7. d3.js学习9
8. D3.js学习（六）
9. D3.js学习（二）
10. D3.js学习（三）
更多相关文章...
• 您已经学习了 XML Schema，下一步学习什么呢？ - XML Schema 教程
• 我们已经学习了 SQL，下一步学习什么呢？ - SQL 教程
• Tomcat学习笔记（史上最全tomcat学习笔记）
• 适用于PHP初学者的学习线路和建议