首页 / D3.JS / 【 D3.js 入门系列 --- 2.1 】 关于怎样选择，插入，删除元素

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了【 D3.js 入门系列 --- 2.1 】 关于怎样选择，插入，删除元素，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1253字，纯文字阅读大概需要2分钟。

内容图文

 本人的个人博客首页为： http://www.ourd3js.com/  ，csdn博客首页为：http://blog.csdn.net/lzhlzz/。

转载请注明出处，谢谢。


在D3.js中，选择元素的函数有两个：select 和 selectAll 。

先说明一下它们的差别：

  • select 是选择所有指定元素的第一个
  • selectAll 是选择指定元素的所有（以用于后面同一时候操作）

来看一个详细的样例，现有例如以下代码：
<html>  
  <head>  
        <meta charset="utf-8">  
        <title>select,append,exit</title>  
  </head> 
</style>
    <body>  
	<h1>This is a cat.</h1>
	<h1>That is a dog.</h1>
	<h1>I like cat.</h1>
		
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>  
        <script>
		
        </script>  
  
    </body>  
</html>
熟悉HTML的朋友一定会知道上面的代码输出什么，是三行h1大小的标题。

假设要完毕两种选择任务：选择第一个h1 和 同一时候选择三个h1 。

代码例如以下：

var body = d3.select("body");           //选择body（第一个body，当然也仅仅有一个body）
var h1 = body.select("h1");             //选择第一个h1
var all_h1 = body.selectAll("h1");      //选择全部的h1
为了证明上面的变量h1选择的是第一个h1，all_h1选择的是全部的h1，我们加上代码： 
h1.style("color","red");
给h1变量选中的元素上色，加上这一句，会发现结果为：

技术分享

如此。我们能够证明我们选中的是第一个元素。

假设换上代码：

all_h1.style("color","blue");

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

那么假设想选择第二个h1呢？正如上一节所说的，有两种方法。要么给h1加id。要么用function的形式，具体见上一节。


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

var new_h1 = body.append("h1");
new_h1.text("Append new h1");
这里表示在body里新插入一个h1标签，插入之后返回新插入的元素，再设定文字为Append new h1。

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

new_h1.remove();
这是删除new_h1变量中选择的元素。


内容总结

以上是互联网集市为您收集整理的【 D3.js 入门系列 --- 2.1 】 关于怎样选择，插入，删除元素全部内容，希望文章能够帮你解决【 D3.js 入门系列 --- 2.1 】 关于怎样选择，插入，删除元素所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1124066.html

来源：【匿名】