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

時間 2019-12-05

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

原文原文鏈接

本人的我的博客首頁爲： http://www.ourd3js.com/ ，csdn博客首頁爲：http://blog.csdn.net/lzhlzz/。html

轉載請註明出處，謝謝。
app

在D3.js中，選擇元素的函數有兩個：select 和 selectAll 。函數

先說明一下它們的差異：post

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

代碼例如如下：.net

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變量選中的元素上色，加上這一句，會發現結果爲：

如此。咱們可以證實咱們選中的是第一個元素。code

假設換上代碼：

htm

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

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

那麼假設想選擇第二個h1呢？正如上一節所說的，有兩種方法。要麼給h1加id。要麼用function的形式，具體見上一節。blog

接下來在body裏新插入一個h1。ip

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 】關於怎樣選擇，插入，刪除元素