【D3.V3.js数据可视化系列教程】--（二）最简单的开始：添加元素

来源：互联网发布：中标麒麟数据库编辑：程序博客网时间：2024/05/22 07:18

【D3.V3.js系列教程】--（一）最简单的开始：添加元素

1、添加元素语法：

d3.select("body").append("p").text("New paragraph!");

2、怎么做？

将D3.V3.js解压到桌面，同时在桌面创建一个index.html

[html] view plaincopyprint?

<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、效果：

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！

你可以将链接选择换行，这样代码结构更清晰

[html] view plaincopyprint?
d3.select("body")  
    .append("p")  
    .text("New paragraph!");  
d3.select("body")    .append("p")    .text("New paragraph!");

还可以避免使用链接语法（这个一般不会用上）：

[html] view plaincopyprint?

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

0 0