D3.js的v5版本入門教程（第五章）—— 選擇、插入、刪除元素

阿新 • • 發佈：2019-01-17

D3.js的v5版本入門教程（第五章）

1、選擇元素

現在我們已經知道，d3.js中選擇元素的函式有select()和selectAll()，下面來詳細講解一下

假設我們的<body>中有三個，如下

    <p>dog</p>
    <p>cat</p>
    <p>pig</p>
    <p>rat</p>

選擇第一個元素

     var p = d3.select("body")
    	.select("p");
     p.style("color","red");

執行結果：

程式碼說明：

-var p = d3.select("body")

.select("p");注意這裡用的是select("p")而不是selectAll。

-p.style("color","red");這裡是為text新增樣式，設定顏色為紅色

選擇全部元素

var p = d3.select("body")
    	.selectAll("p");
p.style("color","red");

執行結果：

程式碼說明：

-也就是把select("p")改成selectAll("p")就好

選擇任意元素

這需要改一下元素的屬性，如下

    <p>dog</p>
    <p class="myP2">cat</p>
    <p id="myP3">pig</p>
    <p>rat</p>

注意這裡更改了兩個的屬性，第二個加了class屬性，訪問時使用 .myP2（前面加點），第三個加了id屬性，訪問時使用#myP3（前面加#），下面演示

var p = d3.select("body")
    	.selectAll(".myP2");
p.style("color","red");

執行結果：

程式碼說明：

-這裡也就是根據元素的屬性——class屬性來選擇特定的元素，（id屬性用法類似）

選擇任意元素（擴充套件）

利用function(d,i)來選擇特定元素，因為我們已經知道i在這裡代表的索引號，那麼可以利用條件語句來選擇我們需要的元素，如：

var dataset = [3,6,9,12];
    	var p = d3.select("body")
    		.selectAll("p")
    		.data(dataset)
    		.text(function(d,i){
    			if(i==3){
    				d3.select(this).style("color","red");
    			}
    			return d;
    		})

執行結果：

程式碼說明：

-if(i==3){ d3.select(this).style("color","red"); }由這裡可以看出，我們選擇的是第4個元素

-var p = d3.select("body")
.selectAll("p")
.data(dataset)

.text(function(d,i))你可能已經之一到這樣的形式語法——鏈式語法，在D3.js中經常用到

2、插入元素

D3.js中涉及兩種插入函式

append()：在選擇集尾部插入元素
insert()：在選擇集前面插入元素

append()

var p = d3.select("body")
    		.append("p")
    		.text("another animal")
    		.style("color","red");

執行結果：

程式碼說明：

-也就是先選擇<body>這個元素，然後在其內部的最後新增一個新的

insert()

var p = d3.select("body")
    		.insert("p","#myP3")
    		.text("insert an animal")
    		.style("color","red");

執行結果：

程式碼說明：

-.insert("p","#myP3")表示在屬性id為myP3的元素前面插入一個新的元素，前面我們已經知道，我們將第三個元素的屬性id設為myP3，（pig），所以結果正確

3、刪除元素

刪除元素很簡單，對於選擇的元素，使用remove();即可

var p = d3.select("body")
    		.select("#myP3")
    		.remove();

程式碼說明：

-這樣就是刪除了屬性id為myP3的元素

（翻外篇）d3.js在網頁端視覺化neo4j圖資料庫

為了讓大家更好的學習d3.js，“d3.js在網頁端視覺化neo4j圖資料庫”這是一個比較綜合的專案——利用neo4j的java驅動API從neo4j中取資料，並利用d3.js在網頁端進行視覺化。大家在學完基礎課程後可以做一下這個專案，進行鞏固。點選下面連結進行檢視：d3.js視覺化neo4j圖資料庫專案專欄

D3.js的v5版本入門教程（第五章）—— 選擇、插入、刪除元素

D3.js的v5版本入門教程（第五章） 1、選擇元素現在我們已經知道，d3.js中選擇元素的函式有select()和selectAll()，下面來詳細講解一下假設我們的<body>中有三個，如下 <

D3.js的v5版本入門教程（第十三章）—— 餅狀圖

D3.js的v5版本入門教程（第十三章）這一章我們來繪製一個簡單的餅狀圖，我們只繪製構成餅狀圖基本的元素——扇形、文字，從這一章開始，內容可能有點難理解，因為每一章都會引入比較多的難理解知識點，在這裡作者本人也只是粗略的講解每個新知識點的意思！如果不是很理解的

D3.js的v5版本入門教程（第十四章）—— 力導向圖

D3.js的v5版本入門教程（第十四章）這一章我們來繪製一個力導向圖，什麼叫力導向圖，通俗一點將就是有節點和線組成，當滑鼠拖拽一個節點時，其他節點都會受到影響（力導向圖有多種型別，本章繪製的效果就是這樣，其他型別的讀者可以自己去試試），還是給讀者提個醒

D3.js的v5版本入門教程（第十六章）—— 中國地圖

D3.js的v5版本入門教程（第十六章） 1、中國地圖的繪製比較簡單，前面學了那麼多，有興趣的讀者可以自己動手來繪製一個，在這裡就不繪製了！只是附上一個截圖來看一看！簡單的中國地圖的效果大概就是這樣，自己動手，豐衣足食，雖然在這裡沒有教大

springboot2.x簡單詳細教程--部署war專案到tomcat9和啟動原理講解（第五章）

一 .SpringBoot啟動方式講解和部署war專案到tomcat9 簡介：SpringBoot常見啟動方式講解和部署war專案Tomcat 1.springboot啟動有多中啟動方式，前幾節課我們用了直接啟動主程式類Application.java即可還有打j

oracle基礎教程（第五天）管理索引、許可權和角色

期望目標 1.掌握維護oracle資料完整性的技巧 2.理解索引概念，會建立索引 3.管理oracle的許可權和角色維護資料的完整性資料的完整性用於確保資料庫資料遵從一定的商業和邏輯規則。在oracle中，資料完整性可以使用約束、觸發器、應用程式（過程、函式）三種方法

Python程式設計：從入門到實踐的動手試一試答案（第五章）

#5-1 條件測試 car = 'subaru' print("Is car == 'subaru'? I predict True.") if car == 'subaru': print(c

java-web學習筆記（第五章）

war 客戶腳本元素 utf 輸出 PE 行動包含筆記第五章：JSP語法一：Servlet和JSP的區別和各自優勢？ Servlet和JSP均基於java語言，Servlet以java類的形式體現，JSP以腳本語言形式體現，兩者均需要在web

吳恩達機器學習（第五章）--特徵縮放和學習率

一、特徵縮放 ----(1) 對於我們假設的式子（1），可能存在這樣一種情況就是有些資料遠大於另一些資料（eg:x_1>>x_2) 比如房子價格的例子：房子的面積要遠大於房子的層數和房間數。在這種情況下可以看下圖，所產生的等高線的圈會很窄，在做梯度下降

為什麼我要放棄javaScript資料結構與演算法（第五章）—— 連結串列

這一章你將會學會如何實現和使用連結串列這種動態的資料結構，這意味著我們可以從中任意新增或移除項，它會按需進行擴張。本章內容連結串列資料結構向連結串列新增元素從連結串列移除元素使用 LinkedList 類雙向連結串列迴圈連結串列第五章連結串列連結串列資

[uboot] （第五章）uboot流程——uboot啟動流程

轉自https://blog.csdn.net/ooonebook/article/details/53070065 以下例子都以project X專案tiny210（s5pv210平臺,armv7架構）為例 [uboot] uboot流程系列： [project

Linux核心設計與實現總結筆記（第五章）系統呼叫

系統呼叫核心提供了使用者程序和核心互動的介面，使得應用程式可以受限制的訪問硬體裝置。提供這些介面主要是為了保證系統穩定可靠，避免應用程式恣意妄行。一、核心通訊系統呼叫在使用者空間程序和硬體裝置之間新增中間才能。作用有三：為使用者空間提供一種硬體的抽象介面。無需理會物理

Linux內核設計與實現總結筆記（第五章）系統調用

總結筆記其余筆記運行 six 應用 osi 虛擬系統抽象接口系統調用內核提供了用戶進程和內核交互的接口，使得應用程序可以受限制的訪問硬件設備。提供這些接口主要是為了保證系統穩定可靠，避免應用程序恣意妄行。一、內核通信系統調用在用戶空間進程和硬件設備之間

網路作業系統課後作業（第五章）

1.比較說明FAT檔案系統和NTFS檔案系統的特點。 FAT檔案系統檔案分配表(File Allocation Table，FAT)是用來記錄檔案所在位置的表格，它對於硬碟驅動器的使用非常重要，假若檔案分配表丟失，那麼硬碟

不測的祕密：精準測試之路----讀書筆記（第五章）

五、精準化測試第三式：度量和分析閉環 1、如何衡量測試精準度：初步想法用程式碼覆蓋率來體現程式碼覆蓋率：用來衡量程式碼被覆蓋程度的一種度量方式語句覆蓋：度量被測程式碼中每個可執行語句是否執行到了判定覆蓋：度量程式中每一個判定的分支（分支真、假）是否都被執行到了

【無私分享：ASP.NET CORE 專案實戰（第五章）】Repository倉儲 UnitofWork

1 public abstract class Repository<T> : IRepository<T> where T : class 2 { 3 #region 資料上下文 4 5 /// <s

Java語言程式設計基礎篇原書第10版 ,樑勇著（第五章）

5.8 (找出最高分）編寫程式，提示使用者輸人學生的個數、每個學生的名字及其分數，最後顯示得最高分的學生的名字。 5.9 (找出兩個分教最高的學生）編寫程式，提示使用者輸人學生的個數、每個學生的名宇及其分數，最後顯示獲得最高分的學生和第二高分的學生。

[kernel 啟動流程] （第五章）第一階段之——臨時核心頁表的建立

本文是基於arm平臺。例子都是以tiny210（s5pv210 armv7）為基礎的。 [kernel 啟動流程]系列：建議參考文件： ================================================ 零、說明

實戰SpringCloud響應式微服務系列教程（第三章）

接著之前的：實戰SpringCloud響應式微服務系列教程（第一章）實戰SpringCloud響應式微服務系列教程（第二章） 1.1.3Reactor框架響應式程式設計是一種程式設計模型，本節將介紹這種程式設計模型的具體實現工具 Project Reactor框架。 Reactor框架也是 Spring

實戰SpringCloud響應式微服務系列教程（第四章）

接上一篇：實戰SpringCloud響應式微服務系列教程（第一章）實戰SpringCloud響應式微服務系列教程（第二章）實戰SpringCloud響應式微服務系列教程（第三章） 1.1.4 引入Reactor框架如果想在程式碼中整合 Reactor框架，則需要新增如下的 Maven依賴，分別引入 R

D3.js的v5版本入門教程（第五章）—— 選擇、插入、刪除元素

相關推薦