首页 > 代码库 > [2.1] D3.js中关于如何选择，插入，删除元素

[2.1] D3.js中关于如何选择，插入，删除元素

2024-07-07 17:23:05   230人阅读

对D3.js或数据可视化有兴趣的朋友欢迎到 www.ourd3js.com 讨论，本人博客首页为：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://www.mamicode.com/"http://d3js.org/d3.v3.min.js" charset="utf-8"></script>  >熟悉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变量中选择的元素。


联系
我们