D3.js学习笔记(4)--数据元素操作及事件

理解D3中的Update、Enter、Exit
解决的问题是选择集跟数据的数量不对等的情况,下面这段代码中selectAll 并没有选中任何 rect 元素，.enter() 的作用就是 当发现当前选择的并没有这个元素（相当于length ==0）就会先占了一块地方然后新建一个缺失的相应元素加入到这块占了的地方

svg.selectAll("rect")   //选择svg内所有的矩形
    .data(dataset)      //绑定数组
    .enter()            //指定选择集的enter部分
    .append("rect")     //添加足够数量的矩形元素

当然 并不是所有选择的元素都是空的情况，当选择的元素不为空时。元素与数据有对应的部分称为Update，元素没对应数据的部分则称为Exit。

数据 没对应 元素 》》》 Enter （需要添加新元素）
数据 有对应 元素 》》》 Update （更新属性值）
元素 没对应 数据 》》》 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: 以上事件不区分字母大小写

当某个事件被监听到时，D3 会把当前的事件存到 d3.event 对象，里面保存了当前事件的各种参数.
circle.on("click", function(){
    var event = d3.event, //事件对象
        target =  event.srcElement,   //  获取事件发生源DOM
        data = d3.select(target).datum(); //  获取事件发生源的数据
    event.stopPropagation();//阻止事件冒泡
    event.preventDefault();  //阻止默认行为
},false); //监听冒泡阶段

有个必须注意的问题是 右键时 return false 并不能阻止浏览器的默认行为，浏览器的右键菜单会触发。必须用 event.preventDefault()或者在〈body oncontextmenu=self.event.returnValue=false〉 才能阻止浏览器右键菜单