d3js data joins深入理解

給定乙個資料陣列和乙個 d3 selection 我們就可以attach或者說是'join'陣列中的每個資料到selection中的每個元素上。

這將使得我們的資料和視覺化元素之間建立緊密的聯絡並實現視覺化成為可能。

比如如果我們有以下svg的circles:

和下面的data陣列：

var scores =[
, ,
, ,
]

那麼我們就可以選中這些circles並且join data到這個selection:

d3
.selectall
('circle').
data
(scores
);隨後我們就可以對這個selection中的元素來設定相應屬性為繫結的資料

d3
.selectall
('circle').
attr
('r'
,function(d
));

上面的**就將每個圓的半徑設定為每個人的score值的大小。（實際使用中，我們往往還會用到scalesqrt比例尺，因為分數大小和視覺化的半徑大小往往需要乙個對映！）

從這個形象化的結果，我們就實現了資料的視覺化：score值越大，圓的半徑就越大，因此只要看到圓大就知道其分數高！

var mydata = [ 10, 40, 20, 30];
var s = d3.selectall('circle');
s.data(mydata);

陣列可以包含任何型別的資料，比如物件陣列：

var
cities=[
,,];vars=
d3.selectall
('circle');s
.data
(cities
);

d3
.selectall
('circle').
attr
('r'
,function(d
));

對每個selection中的element, d3都會呼叫.attr()函式, 傳入該element的joined datad. 而上面匿名函式的返回值作為r的值設定到該元素中.

再比如以下elements：

/>
/>
/>
/>
/>

和如下資料

var
mydata=[
10,40,
20,30,
50];

我們執行一下data join:

vars=
d3.selectall
('circle'
);// do the joins.
data
(mydata
);

s
.attr
('r'
,function(d
));

傳入.attr()的匿名函式將被呼叫 5 次 (selection中的每乙個元素呼叫一次). 第一次呼叫時d是10 因此第乙個circle的r設定為10. 第二次呼叫時為40 因此第二個circle的r設定為40...

我們也可以對d做任何其他處理之後再返回,比如

s
.attr
('r'
,function(d
));

再比如，如果元素繫結的資料大於40，我們則給該元素新增乙個css類，以便更改這類元素的樣式。

s
.classed
('high'
,function(d
));

最後我們來使用i引數來設定其cx的位置:

s
.attr
('cx'
,function(d
,i));

總結如下：

var
mydata=[
10,40,
20,30,
50];
vars=d3
.selectall
('circle'
);// do the data joins.
data
(mydata
);// modify the selected elementss.
attr
('r'
,function(d
)).classed
('high'
,function(d
)).attr
('cx'
,function(d
,i));

var
cities=[
,,,,
];vars=
d3.selectall
('circle');s
.data
(cities
);

這時當我們根據joined data來修改元素屬性時，d將代表的是joinedobject. 這樣對第乙個元素，其d將是.

我們再來根據每個城市的population設定circle的半徑大小：

s
.attr
('r'
,function(d
)).attr
('cx'
,function(d
,i));

當然，我們並不限於修改circle元素，加入我們還有rect和text元素，我們同樣可以使用該data join並且設定這些元素的屬性：

var
cities=[
,,,,
];// join cities to rect elements and modify height, width and positiond3.
selectall
('rect').
data
(cities).
attr
('height',19
).attr
('width'
,function(d
)).attr
('y'
,function(d
,i))
// join cities to text elements and modify content and positiond3.
selectall
('text').
data
(cities).
attr
('y'
,function(d
,i))
.attr
('x',-
4).text
(function(d
));

當d3執行data join時，d3將對每個dom元素增加乙個attribute: __data__，並且將對應的data賦值給該屬性。實際上，如果我們需要設定其他額外的資料的話，也可以在.each函式中通過.attr('custom_attr','data')來新增並且在後面使用。

使用這種方式來檢查是否有繫結好的資料，在需要除錯**行為是否符合預期時是非常有用的。

到目前為止，資料陣列的長度和元素的個數是相同的。往往現實並非如此，這時我們就需要了解enter和exit的概念了，我們在另外一篇部落格中描述。

在有些情況下， (比如當處理地圖相關的視覺化時 geographic visualisations) ，我們可能需要給乙個只含乙個元素的selection繫結乙個single data，比如：

var
featurecollection
=;

d3
.select
('path#my-map').
datum
(featurecollection
);

這將新增乙個__data__attribute 到元素上並且 assigns the joined data (featurecollection）到這個元素上。可以檢視 geographic visualisations

大多數情況下.data用於data join, .datum用於特定場景。

d3js data joins深入理解

CSS 深入 3D 動畫

深入學習D3JS Stacks

深入學習D3JS d3 path

d3js data joins深入理解

CSS 深入 3D 動畫

深入學習D3JS Stacks

深入學習D3JS d3 path

相關推薦