【 D3.js 入门系列 --- 2.1 】 关于如何选择，插入，删除元素

时间  2019-11-11
标签 d3.js 入门 系列 2.1 关于 如何 选择 插入 删除 元素 栏目 JavaScript 繁體版
原文   原文链接

在D3.js中，选择元素的函数有两个：select 和 selectAll 。 先说明一下它们的区别：html

 

  • select 是选择全部指定元素的第一个
  • selectAll 是选择指定元素的所有（以用于后面同时操做）
 
来看一个具体的例子，现有以下代码：

 

[html]  view plain  copy
 
  1. <html>    
  2.   <head>    
  3.         <meta charset="utf-8">    
  4.         <title>select,append,exit</title>    
  5.   </head>   
  6. </style>  
  7.     <body>    
  8.     <h1>This is a cat.</h1>  
  9.     <h1>That is a dog.</h1>  
  10.     <h1>I like cat.</h1>  
  11.           
  12.     <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>    
  13.         <script>  
  14.           
  15.         </script>    
  16.     
  17.     </body>    
  18. </html>    

熟悉HTML的朋友必定会知道上面的代码输出什么，是三行h1大小的标题。若是要完成两种选择任务：选择第一个h1 和 同时选择三个h1 。app

 

代码以下：函数

 

[html]  view plain  copy
 
  1. var body = d3.select("body");           //选择body（第一个body，固然也只有一个body）  
  2. var h1 = body.select("h1");             //选择第一个h1  
  3. var all_h1 = body.selectAll("h1");      //选择全部的h1  

为了证实上面的变量h1选择的是第一个h1，all_h1选择的是全部的h1，咱们加上代码：spa

 

 

[html]  view plain  copy
 
  1. h1.style("color","red");  

给h1变量选中的元素上色，加上这一句，会发现结果为：.net

 

如此，咱们能够证实咱们选中的是第一个元素。xml

若是换上代码：

htm

[html]  view plain  copy
 
  1. all_h1.style("color","blue");  


会发现三行文字都变成了蓝色。blog

 

那么若是想选择第二个h1呢？正如上一节所说的，有两种方法，要么给h1加id，要么用function的形式，详细见上一节。ip

 

接下来在body里新插入一个h1。utf-8

 

[html]  view plain  copy
 
  1. var new_h1 = body.append("h1");  
  2. new_h1.text("Append new h1");  

这里表示在body里新插入一个h1标签，插入以后返回新插入的元素，再设定文字为Append new h1。

 

删除一个元素时，对于选择的元素使用remove，如：

 

[html]  view plain  copy
 
  1. new_h1.remove();  

这是删除new_h1变量中选择的元素。

 

 

 

 

来自：博客首页为： http://www.ourd3js.com/  ，csdn博客首页为：http://blog.csdn.net/lzhlzz/。转载请注明出处，谢谢。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程