一、隔了一段時間沒看D3了，好多api又陌生了。武林太大，唯有自強不息。 D3 選擇器算是學習D3的第一步吧。 跟 學習JQ一樣。先熟悉下api，才能夠如魚得水，手到勤來。 二、 選擇器 1.選擇器 2.內容（主要是更改DOM元素的屬性和類名的方法） 3.section.data() ...
一、隔了一段時間沒看D3了，好多api又陌生了。武林太大，唯有自強不息。
D3 選擇器算是學習D3的第一步吧。 跟 學習JQ一樣。先熟悉下api，才能夠如魚得水，手到勤來。
二、 選擇器
1.選擇器
/* 1.d3.select(dom); dom => 可以是類，ID。說白了跟JQ的 $(dom) 完全一樣。不過select返回的時候。頁面中匹配到的第一個元素。 或者為null 2.d3.selectAll(dom); => 跟JQ完全一樣。 $(dom) */
2.內容（主要是更改DOM元素的屬性和類名的方法）
/* 1. selection.attr(name[, value]) 意思是 (1) d3.selectAll('p').attr('data-href','http://baidu.com'); 相當於JQ中的 $(dom).attr(); 的方法一樣。 (2) 其中value 為function的時候 (d,i, this) i=> 的選中元素的序號， this 當前的元素 d3.select(this).attr('data-href',i) d3.selectAll('p').attr('data-href',function(d,i){ return i; }) 2.section.classed(name[,value]); 跟上面的attr 基本一樣。顧名思義 => 就是對類名的操作。 eg: d3.selectAll('div').classed({"foo":true,"bar":"false"}); 或者 d3.selectAll('div').classed('foo bar',true); true => 對匹配的元素還為添加這個class名的元素添加這個class名字。 false => 對匹配的元素有這個class名的元素去掉這個class名字 3.section.style(name[, value[, priority]]) 跟上面classed 的用法基本一樣。我就不細說了 eg: d3.selectAll('span').style({'color':'red','font-size':'50px'}); 4.selection.property(name[, value]) 跟classed的方法差不多。 主要是針對錶單元素中 的屬性 比如 ： disable,checkbox,radio。readonly等等 eg : de.selectAll('input').property({'checkbox':true,'disable':false}) 5.select.text(); 這個方法跟JQ的text(); 方法一樣。 6.section.html(); 同上 7.section.append(); 想選中元素的後面插入dom節點 跟jq一樣 8. section.insert(); 選中的dom 元素中的子節點前面插入 9.section.remove(); 溢出 */
3.section.data()
/*
section.data([values[, key]);的方法比較複雜。 主要涉及到幾點
1.一種情況就是選中的元素和data數據剛好匹配。 這時候
可以直接
html:
<div class="div"></div>
<div class="div"></div>
d3.select("body").selectAll('.div').data([1,23]).text(function(d){
return d;
});
2. 匹配元素有0個。單時候數據有多條的時候。
d3.selectAll('.a').data([1,2,3]).enter().append('.a').text(function(d){
return d;
});
3. 匹配的元素有多個的時候。也就是數據更少。需要把多餘的元素刪掉
d3.selectAll('.b').data([1]).exit().remove();
所以我們寫方法的時候。基本都是
d3.selectAll('.c').data([1,2,3]).enter().append('.a').exit().remove();
你們肯定發現了。這跟JQ的鏈式編程一樣。
*/
//1.
var matrix = [
[11975, 5871, 8916, 2868],
[ 1951, 10048, 2060, 6171],
[ 8010, 16145, 8090, 8045],
[ 1013, 990, 940, 6907]
];
var tr = d3.select("body").append("table").selectAll("tr")
.data(matrix)
.enter().append("tr");
var td = tr.selectAll("td")
.data(function(d) { return d; })
.enter().append("td")
.text(function(d) { return d; });
/*
section.enter();
section.exit();
section.remove();的方法就不介紹了。上面有啊
*/
/* d3.section.datum 獲取或設置每個選定的元素綁定的數據。不像selection.data方法，這種方法不計算一個連接（並因此不計算enter和exit的選擇）。此方法在selection.property之上實現： d3.selection.prototype.datum = function(value) { return arguments.length < 1 ? this.property("__data__") : this.property("__data__", value); }; */
