D3入门系列(3)--简单的交互与动态

首先，介绍一下D3中三个非常重要的概念Update、Enter、Exit 。

如果数组为 [3, 6, 9, 12, 15]，将此数组绑定到三个 p 元素的选择集上。可以想象，会有两个数据没有元素与之对应，这时候 D3 会建立两个空的元素与数据对应，这一部分就称为 Enter。而有元素与数据对应的部分称为 Update。如果数组为 [3]，则会有两个元素没有数据绑定，那么没有数据绑定的部分被称为 Exit

• update 部分的处理办法一般是：更新属性值
• enter 部分的处理办法一般是：添加元素后，赋予属性值
• exit 部分的处理办法一般是：删除元素（remove）

图表的简单交互

图表的交互，一般是通过设置一个或多个监听器，然后触发对应的事件来完成的。

交互的工具一般有三种：鼠标、键盘、触屏

鼠标常用的事件有：

• click：鼠标单击某元素时，相当于 mousedown 和 mouseup 组合在一起。
• mouseover：光标放在某元素上。
• mouseout：光标从某元素上移出来时。
• mousemove：鼠标被移动的时候。
• mousedown：鼠标按钮被按下。
• mouseup：鼠标按钮被松开。
• dblclick：鼠标双击。

键盘常用的事件有三个：

• keydown：当用户按下任意键时触发，按住不放会重复触发此事件。该事件不会区分字母的大小写，例如“A”和“a”被视为一致。
• keypress：当用户按下字符键（大小写字母、数字、加号、等号、回车等）时触发，按住不放会重复触发此事件。该事件区分字母的大小写。
• keyup：当用户释放键时触发，不区分字母的大小写。

触屏常用的事件有三个：

• touchstart：当触摸点被放在触摸屏上时。
• touchmove：当触摸点在触摸屏上移动时。
• touchend：当触摸点从触摸屏上拿开时。

在D3中，监听器是通过on()添加的，例如

var circle = svg.append("circle");

circle.on("click", function(){
    //在这里添加交互内容
});

交互小实例

在之前(1)中画过的条形图的基础上，添加交互效果

var rects = svg.selectAll(".MyRect")
        .data(dataset)
        .enter()
        .append("rect")
        .attr("class","MyRect")   //把类里的 fill 属性清空
        .attr("transform","translate(" + padding.left + "," + padding.top + ")")
        .attr("x", function(d,i){
            return xScale(i) + rectPadding/2;
        } )
        .attr("y",function(d){
            return yScale(d);
        })
        .attr("width", xScale.rangeBand() - rectPadding )
        .attr("height", function(d){
            return height - padding.top - padding.bottom - yScale(d);
        })
        .attr("fill","steelblue")       //填充颜色不要写在CSS里
        .on("mouseover",function(d,i){
            d3.select(this)
                .attr("fill","yellow");
        })
        .on("mouseout",function(d,i){
            d3.select(this)
                .transition()
                .duration(500)
                .attr("fill","steelblue");
        });

 交互进阶

还有一种交互的方式：行为。主要有两种方法：拖拽、缩放

拖拽

D3 中可用 d3.behavior.drag() 来定义拖拽行为，并提供了3种拖拽事件：dragstart、dragend、drag

var drag = d3.behavior.drag()
        .on("drag", dragmove); //此处用的是drag事件
                        
function dragmove(d) {    
    d3.select(this)
        .attr("cx", d.cx = d3.event.x )//d3.event.x鼠标当前位置
        .attr("cy", d.cy = d3.event.y );
}

缩放

D3 中可用 d3.behavior.zoom() 来定义缩放行为

var zoom = d3.behavior.zoom()
        .scaleExtent([1, 10]) //scaleExtent 用于设置最小和最大的缩放比例
        .on("zoom", zoomed);//当 zoom 事件发生时，调用 zoomed 函数

//zoomed 函数，用于更改需要缩放的元素的属性，d3.event.translate 是平移的坐标值，d3.event.scale 是缩放的值
function zoomed() {
    d3.select(this).attr("transform", 
        "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}

图表的动态

D3 提供了 4 个方法用于实现图形的过渡：从状态 A 变为状态 B。

transition()：启动过渡效果，其前后是图形变化前后的状态（形状、位置、颜色等）

duration()：指定过渡的持续时间，单位为毫秒

ease()：指定过渡的方式。linear(普通线性变化)、circle(慢慢变换)、elastic(弹跳变化)、bounce(在最终处弹跳)。 ease(“bounce”) 

delay()：指定延迟的时间，单位为毫秒。

动态小实例

改变circle1的位置、半径和颜色。

var circle1=svg.append("circle")
                  .attr("cx",100)
                  .attr("cy",500)
                  .attr("r",45)
                  .style("fill","green");
  circle1.transition().duration(1000).ease("bounce").attr("cx",300).attr("r",20).style("fill","red");