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

2023-05-25,,

在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变量中选择的元素。

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

【 D3.js 入门系列 --- 2.1 】 关于如何选择,插入,删除元素的相关教程结束。

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

下载本文的Word格式文档,以方便收藏与打印。