【D3.V3.js系列教程】--(一)最简单的开始:添加元素
1、添加元素语法:
d3.select("body").append("p").text("New paragraph!");
2、怎么做?
将D3.V3.js解压到桌面,同时在桌面创建一个index.html
- <html>
- <HEAD>
- <meta charset="utf-8">
- <TITLE> D3测试</TITLE>
- <span style="color: rgb(255, 0, 0);"><strong><script type="text/javascript" src="d3.v3/d3.v3.js"></SCRIPT></strong> </span>
- </HEAD>
- <BODY>
- <script type="text/javascript">
- <span style="color: rgb(255, 0, 0);"><strong> d3.select("body").append("p").text("New paragraph!");</strong>
- </span> </SCRIPT>
- </BODY>
- </HTML>
<html>
<HEAD>
<meta charset="utf-8">
<TITLE> D3测试</TITLE>
<script type="text/javascript" src="d3.v3/d3.v3.js"></SCRIPT>
</HEAD>
<BODY>
<script type="text/javascript">
d3.select("body").append("p").text("New paragraph!");
</SCRIPT>
</BODY>
</HTML>
3、效果:
![](https://img-blog.csdn.net/20130907153937671?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemhhbmdfX3RpYW54dQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
4、说明:
<script type="text/javascript" src="d3.v3/d3.v3.js"></SCRIPT>
为引用D3所在路径
d3.select("body").append("p").text("New paragraph!");
为选择body标签,为之添加一个p标签,并设置它的内容为New paragraph!
你可以将链接选择换行,这样代码结构更清晰
- d3.select("body")
- .append("p")
- .text("New paragraph!");
d3.select("body") .append("p") .text("New paragraph!");
还可以避免使用链接语法(这个一般不会用上):
- var body = d3.select("body");
- var p = body.append("p");
- p.text("New paragraph!");
var body = d3.select("body");
var p = body.append("p");
p.text("New paragraph!");
转自:http://blog.csdn.net/tianxuzhang/article/details/11320725