理解D3中的Update、Enter、Exit
解決的問題是選擇集跟數(shù)據(jù)的數(shù)量不對等的情況,下面這段代碼中selectAll 并沒有選中任何 rect 元素，.enter() 的作用就是 當(dāng)發(fā)現(xiàn)當(dāng)前選擇的并沒有這個元素（相當(dāng)于length ==0）就會先占了一塊地方然后新建一個缺失的相應(yīng)元素加入到這塊占了的地方

svg.selectAll("rect")   //選擇svg內(nèi)所有的矩形
    .data(dataset)      //綁定數(shù)組
    .enter()            //指定選擇集的enter部分
    .append("rect")     //添加足夠數(shù)量的矩形元素

當(dāng)然 并不是所有選擇的元素都是空的情況，當(dāng)選擇的元素不為空時。元素與數(shù)據(jù)有對應(yīng)的部分稱為Update，元素沒對應(yīng)數(shù)據(jù)的部分則稱為Exit。

數(shù)據(jù) 沒對應(yīng) 元素 》》》 Enter （需要添加新元素）
數(shù)據(jù) 有對應(yīng) 元素 》》》 Update （更新屬性值）
元素 沒對應(yīng) 數(shù)據(jù) 》》》 Exit （exit部分的處理通常是刪除元素 exit.remove()）

D3中的事件

click事件示例：
var circle = svg.append("circle");
circle.on("click", function(){
    //code
});

常見的鼠標(biāo)事件：click、mouseover、mouseout、mousedown、mousemove、mouseup
PS：沒有 dblclick 事件，需要通過 click +延遲判斷模擬

常見鍵盤事件：keydown、keypress、keyup
PS: 以上事件不區(qū)分字母大小寫

當(dāng)某個事件被監(jiān)聽到時，D3 會把當(dāng)前的事件存到 d3.event 對象，里面保存了當(dāng)前事件的各種參數(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();  //阻止默認(rèn)行為
},false); //監(jiān)聽冒泡階段

有個必須注意的問題是 右鍵時 return false 并不能阻止瀏覽器的默認(rèn)行為，瀏覽器的右鍵菜單會觸發(fā)。必須用 event.preventDefault()或者在〈body oncontextmenu=self.event.returnValue=false〉 才能阻止瀏覽器右鍵菜單