理解D3中的Update皮仁、Enter而昨、Exit
解決的問題是選擇集跟數(shù)據(jù)的數(shù)量不對等的情況,下面這段代碼中selectAll
并沒有選中任何 rect
元素,.enter() 的作用就是 當發(fā)現(xiàn)當前選擇的并沒有這個元素(相當于length ==0
)就會先占了一塊地方然后新建一個缺失的相應元素加入到這塊占了的地方
svg.selectAll("rect") //選擇svg內(nèi)所有的矩形
.data(dataset) //綁定數(shù)組
.enter() //指定選擇集的enter部分
.append("rect") //添加足夠數(shù)量的矩形元素
當然 并不是所有選擇的元素都是空的情況蹄溉,當選擇的元素不為空時屎暇。元素與數(shù)據(jù)有對應的部分稱為Update
,元素沒對應數(shù)據(jù)的部分則稱為Exit
况脆。
數(shù)據(jù) 沒對應 元素 》》》 Enter (需要添加新元素)
數(shù)據(jù) 有對應 元素 》》》 Update (更新屬性值)
元素 沒對應 數(shù)據(jù) 》》》 Exit (exit部分的處理通常是刪除元素 exit.remove())
D3中的事件
click事件示例:
var circle = svg.append("circle");
circle.on("click", function(){
//code
});
常見的鼠標事件:click
饭宾、mouseover
、mouseout
格了、mousedown
看铆、mousemove
、mouseup
PS:沒有 dblclick
事件盛末,需要通過 click
+延遲判斷模擬
常見鍵盤事件:keydown
弹惦、keypress
、keyup
PS: 以上事件不區(qū)分字母大小寫
當某個事件被監(jiān)聽到時满败,D3 會把當前的事件存到 d3.event 對象肤频,里面保存了當前事件的各種參數(shù).
circle.on("click", function(){
var event = d3.event, //事件對象
target = event.srcElement, // 獲取事件發(fā)生源DOM
data = d3.select(target).datum(); // 獲取事件發(fā)生源的數(shù)據(jù)
event.stopPropagation();//阻止事件冒泡
event.preventDefault(); //阻止默認行為
},false); //監(jiān)聽冒泡階段
有個必須注意的問題是 右鍵時 return false
并不能阻止瀏覽器的默認行為,瀏覽器的右鍵菜單會觸發(fā)算墨。必須用 event.preventDefault()
或者在〈body oncontextmenu=self.event.returnValue=false〉
才能阻止瀏覽器右鍵菜單