【 D3.js 入門系列 --- 2.1 】關於如何選擇，插入，刪除元素

時間 2019-11-11

標籤 d3.js 入門系列 2.1 關於如何選擇插入刪除元素欄目 JavaScript 简体版

原文原文鏈接

在D3.js中，選擇元素的函數有兩個：select 和 selectAll 。先說明一下它們的區別：html

select 是選擇全部指定元素的第一個
selectAll 是選擇指定元素的所有（以用於後面同時操做）

來看一個具體的例子，現有以下代碼：

[html] view plain copy

<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 。app

代碼以下：函數

[html] view plain copy

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，咱們加上代碼：spa

[html] view plain copy

h1.style("color","red");

給h1變量選中的元素上色，加上這一句，會發現結果爲：.net

如此，咱們能夠證實咱們選中的是第一個元素。xml

若是換上代碼：

htm

[html] view plain copy

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

會發現三行文字都變成了藍色。blog

那麼若是想選擇第二個h1呢？正如上一節所說的，有兩種方法，要麼給h1加id，要麼用function的形式，詳細見上一節。ip

接下來在body裏新插入一個h1。utf-8

[html] view plain copy

var new_h1 = body.append("h1");
new_h1.text("Append new h1");

這裏表示在body裏新插入一個h1標籤，插入以後返回新插入的元素，再設定文字爲Append new h1。

刪除一個元素時，對於選擇的元素使用remove，如：

[html] view plain copy

new_h1.remove();

這是刪除new_h1變量中選擇的元素。

來自：博客首頁爲： http://www.ourd3js.com/ ，csdn博客首頁爲：http://blog.csdn.net/lzhlzz/。轉載請註明出處，謝謝。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

【 D3.js 入門系列 --- 2.1 】 關於如何選擇，插入，刪除元素

【 D3.js 入門系列 --- 2.1 】關於如何選擇，插入，刪除元素