d3選擇集合核心方法 二 data與datum

表一 d3賦值語句data與datum的區別

特性datum

data

集合運算

不支援支援enter、exit函式

唯一性識別

不支援不支援

舊資料清除

支援不支援

讀取資料

返回集合的第一條資料

返回集合的所有資料

賦值將集合的每個元素設定為同樣的值

集合更新運算，兩個集合的交集運算

鏈式操作

後值總是覆蓋前值

不斷進行集合的交集運算

對空元素賦值

後續操作無效果

可通過enter新增新元素

假定預置的dom元素如下：

class="list-group-item"

id="1">
li>
class="list-group-item"
id="2">
li>
class="list-group-item"
id="3">
li>

//  進行交集運算, update.data()運算結果為[1, 2, 3]

var update = d3.selectall('.list-group-item').data([1, 2, 3])
// 進行賦值運算,所有的.list-group-item元素的資料都為[1, 2, 3]
var items = d3.selectall('.list-group-item').data([1, 2, 3])

//  可新增主鍵的唯一性識別，排除重複元素, update.data()運算結果為[1, 2, 3]

var update = d3.selectall('.list-group-item').data([1, 2, 3], function
(d) )

//  無效，始終會進行集合運算，並且引數只接受陣列型別

var update = d3.select('#list-group-item').data() 
// 有效，會將#list-group-item的資料更新為
var update = d3.select('#list-group-item').datum()

//  返回所有.list-group-item元素的資料，型別必定是陣列,本例中為[1, 2, 3]

var values = d3.selectall('.list-group-item').data() 
// 返回的總是第乙個.list-group-item元素的資料，依賴於設定的值,本例中返回1
var value = d3.selectall('.list-group-item').datum()

//  宣告唯一性識別函式

var identify = function
(d) 
// 不斷進行集合運算,假定有上面的預置dom，返回的結果為[2, 3]
var joins = d3.selectall('.list-group-item').data([1, 2, 3], identify).data([2, 3, 4], identify) 
// 所有.list-group-item元素的資料都為[2, 3, 4]
var update = d3.selectall('.list-group-item').datum([1, 2, 3], identify).datum([2, 3, 4], identify)

//  不會新增任何元素

(d) )
// 會新增元素
d3.select('header').data() // 務必確認賦值一定是陣列
(d) )

D3的學習 01 選擇與繫結

1.select與selectall d3.select 是選擇所有指定元素的第乙個 d3.selectall 是選擇指定元素的全部 其他選擇方式 2.元素的繫結 datum 繫結乙個資料到選擇集上 data 繫結乙個陣列到選擇集上，陣列的各項值分別與選擇集的各元素繫結 e.g 2 var data...

D3選擇元素和繫結資料

d3選擇 插入 刪除元素d3.select 是選擇所有指定元素的第乙個 d3.selectall 是選擇指定元素的全部pear banana d3繫結資料d3 中是通過以下兩個函式來繫結資料的 相對而言，data 比較常用。datum pear banana 其結果如下 第 0 個元素繫結的資料是 ...

d3設定line長度 SVG 介面方法

svg中的一些dom介面 在使用指令碼操作svg時，有時候希望能計算一些沒有被直接定義的幾何屬性。比如不管文字怎麼變化，都能畫乙個更好匹配文字區域的矩形。1.svg element svg命名空間中的任何元素 方法或屬性 說明.ownersvgelement 返回最近的祖先svg元素，如果是在頂級s...