日期:2014-05-16  浏览次数:20415 次

【D3.V3.js系列教程】--(二)最简单的开始:添加元素

【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>
        <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!

 

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

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

还可以避免使用链接语法(这个一般不会用上):

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


 

 

以后,你也可以把这些页面和JS部署到你自己的项目之中。我们之后的示例都将部署到项目之中演示!!