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

最新推荐文章于 2021-03-27 19:25:49 发布

Harry_Burt

最新推荐文章于 2021-03-27 19:25:49 发布

阅读量1.2k

点赞数

分类专栏： d3.js

d3.js 专栏收录该内容

10 篇文章

订阅专栏

本文介绍如何使用D3.V3.js进行基本操作，具体包括添加元素的方法、引用路径、选择元素并为其添加内容的步骤及实际效果演示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

1、添加元素语法：

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

2、怎么做？

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

[html] view plain copy print ?

<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 plain
    
    copy
    
    print
    
    ?
   
   
  
  
  
  d3.select("body")  
    .append("p")  
    .text("New paragraph!");  
 
 
d3.select("body")
    .append("p")
    .text("New paragraph!");

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

[html] view plain copy print ?

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.youkuaiyun.com/tianxuzhang/article/details/11320725