2. 程式人生 > >d3選擇集合的操作方法(一):select與selectAll

d3選擇集合的操作方法(一):select與selectAll

阿新 • • 發佈：2019-02-05

      select與selectAll返回的結果都是d3的選擇集合，並且都能進行集合運算，唯一不同的是集合的數量，select的數量恆小於等於1，並且總是返回第一個元素(如果存在的話)，最令人驚訝的是，select還難以建立集合的父子關係；而selectAll則是選擇的所有元素。
      假定文件中現有的dom元素如下所示：

<body>
    <ul id="user-list">
        <li class="list-group-item">0001
        </li>
        <li class="list-group-item"
 
>0002
        </li>
    </ul>
</body>

      測試的相關程式碼如下所示：

alert(d3.select('#user-list>li.list-group-item').size());   //  輸出1
alert(d3.selectAll('#user-list>li.list-group-item').size());    // 輸出2
//  假定資料集合的內容如下
var datas = [{
    name :　"yiifaa",
    age  :  32
}, {
    name :　"yiifee"
 
,
    age  :  29
},  {
    name :　"yiifoo",
    age  :  29
}];
// 集合操作
d3.select('#user-list')
  .select('li.list-group-item')
  .data(datas)  
  .enter()  // 因為現有的集合裡只有一個元素，所以還能新增一個元素
  .append('li')
  .classed('list-group-item', true)
  .text(function(d) {
      return d.name;
  });
//  如果把上面的第二個選擇語句換為selectAll
 

var addItems = d3.select('#user-list')
                  .select('li.list-group-item')
                  .data(datas)  
                  .enter();
// 現有的集合與比較的集合都是兩個元素，所以新增的元素為0  
alert(addItems.size()); //  輸出0

      執行上面的程式碼後，輸出的HTML節點如下所示，請仔細觀察select新增元素的插入位置：

<body>
    <ul id="user-list">
        <li class="list-group-item">0001
        </li>
        <li class="list-group-item">0002
        </li>
    </ul>
</body>
<!-- 新插入的元素竟然會放置在這裡，真是讓人驚訝 -->
<li class="list-group-item">yiifee</li>

相關推薦

d3選擇集合的操作方法(一):select與selectAll

      select與selectAll返回的結果都是d3的選擇集合，並且都能進行集合運算，唯一不同的是集合的數量，select的數量恆小於等於1，並且總是返回第一個元素(如果存在的話)，最令人驚訝的是，select還難以建立集合的父子關係；而selectA

d3選擇集合核心方法(一)：data、enter、exit

      d3的全稱是資料驅動文件，核心是將DOM文件的操作轉換為對資料集合的操作，把開發人員的聚焦從DOM文件轉移到資料集合上，大大簡化了DOM文件與資料集合之間的聯動操作，所以理解d3的集合操作就是學習d3的關鍵。       假定原有的集合與待運算的集

d3選擇集合的操作方法(四):sort與order

      sort方法只能對帶有資料的元素進行排序，因此如果對頁面已有的元素但沒有繫結資料的元素進行排序，則需要進行預處理，order能將已排序的元素但已改變順序的元素(如通過raise與lower方法)恢復為排序初始狀態，並且效能表現更佳。 依舊假定頁面中

SQL系列(一)SELECT與表示式的日常使用

-------------------------------------------------------------新手適用。 一、SELECT的簡單使用 1.查表所有資料：    select * from 表名 2.查表中

python3集合操作方法詳解 python3集合操作大全

1 #!/usr/bin/env python 2 # -*- coding:utf-8 -*- 3 #Author:sking 4 #python3集合操作方法詳解 python3集合操作大全 5 6 #集合是無序的 7 #建立集合 8 a = {1,2,3} #正

python3集合操作方法詳解 python3集合操作大全

拷貝 join 判斷 bbb disjoint mov 就是 remove 復制 1 #!/usr/bin/env python 2 # -*- coding:utf-8 -*- 3 #Author:sking 4 #python3集合操作方法詳解 py

常用的字串操作方法，DateTime與TimeSpan

using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; namespace 職稱列舉型別 {

Charles的基本操作方法與python基礎（一）

inpu 格式 format log text src 基礎 pos -s 開始與結束按鈕： 斷點按鈕： 清空按鈕： 若抓不到包可嘗試更改瀏覽器重新請求 python基礎（一） 計算機語言分為編譯型語言和解釋型語言，編譯型語言需要提前編譯，然後直接拿來運行，但解釋型語

Python——day3_基礎1_集合,文件操作,字符編碼與轉碼

windows 使用 bject 差集 ise fse style spl dev 集合 集合是一個無序的，不重復的數據組合，它的主要作用如下： 去重，把一個列表變成集合，就自動去重了 關系測試，測試兩組數據之前的交集、差集、並集等關系 常用操作 s = set([3

MVC5 您不能調用控制器“xx”上的操作方法“xx”，因為該方法是一種泛型方法

路由 例如 man log 操作 ons odin csharp ati 在 MVC5 中當使用 routes.MapMvcAttributeRoutes() 添加路由屬性是導致在控制器創建的泛型方法調用錯誤： Cannot call action method ‘S

MyBatis無限級分類實現的兩種方法--自關聯與map集合

except app exce utf-8 elf findall ldr ati tex 1、這回先創建數據庫吧 下表cid是CategoryId的縮寫,cname是CategoryName的縮寫，pid是parentId的縮寫 無限級分類一般都包含這三個屬性，至少也要包

python字典與集合操作

成員 創建 error: 技術分享 blog lap 關系 size pen 字典操作 字典一種key - value 的數據類型，使用就像我們上學用的字典，通過筆劃、字母來查對應頁的詳細內容。 語法： info = { ‘s1‘: "jack",

圖片的輪播與選擇上下頁方法

pos innerhtml utf borde 選擇 clas width window 無標題 <!doctype html><html><head><meta charset="utf-8"><title>無標

laravel中的數據庫操作（增刪改查）方法一

-s delet 增刪 insert 修改 name tro des 命名空間 導入命名空間和DBnamespace App\Http\Controllers;use Illuminate\Support\Facades\DB; public function index

Python中的對象行為與特殊方法(一)對象的創建與銷毀

連接 繼承 並不會 參數 asa rac 方式 垃圾收集 shell Python中類調用__new__()類方法來創建實例，調用__init__()方法來初始化對象，對象的銷毀則調用__del__()方法。 __new__()方法第一個參數為類cls，通常返回cls的一個

python學習5-集合與集合操作

必須 成員 car ror 索引 叠代 err amp pop 數學意義上的集合,沒有重復元素，元素必須可hash1、定義s = set()s = {1,2,3}s = set(可叠代對象)2、加s.add(元素) #增加1個元素，類似列表的appends.update(可

2.4.2 集合操作與運算

部分 簡單介紹 關系運算 collect 之間 對稱 常用 作用 AD 1 集合元素增加與刪除 　　使用集合對象的add()方法可以為其增加新元素，如果該元素已存在於集合則忽略該操作；update()方法用於合並另外一個集合中的額元素到當前集合中。例如： 1 >&

C#中List集合操作IEqualityComparer正確使用方法

基礎 類型 con sealed check reference tle list集合 union C#中List集合操作IEqualityComparer正確使用方法 Except、Intersect、Union方法中的IEqualityComparer 怎麽使用 對於普

oracle 11g RAC 的基本操作（一）------啟動與關閉

執行 同時 man sources monit vip nag 查看數據庫 resource 啟動RAC 手工啟動按照HAS, cluster, database的順序啟動，具體命令如下： 啟動HAS(High Availability Servi

python集合操作和內置方法

關系運算 可變 iss upd 最重要的 clas 類型 介紹 sca 一 集合基本介紹 集合：在{}內用逗號隔開每個值，集合的特點： 每個值必須是不可變類型 集合是無序的 集合的值不能重復 集合的應用場景較少，最重要的應用場景為進行關系運算以及去重。 二 集合的操作