第八章 d3拖拽和事件及缩放

简单的拖拽举例

var draged = d3.drag()
        .on('drag', function (d) {
            d.dx += d3.event.dx;
            d.dy += d3.event.dy;
            d3.select(this).attr("transform", "translate(" + d.dx + "," + d.dy + ")");
        })
var arcGroup = svg.selectAll('g')
        .data(pies)
        .enter()
        .append('g')
        .each(function (d) {
            d.dx = width / 2
            d.dy = height / 2
        })
        .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
        .call(draged)

drag.container(svg) //设置拖拽事件的相对父元素

事件

var dispatch = d3.dispatch("start", "end");
dispatch.on("start",function(){console.log("start”)})
dispatch.on( "end"),function(){console.log("end")})
selection.on("click", function() {
  dispatch.apply("start", this, arguments);
});

缩放d3.zoom()

zoom.transform(selection, transform)

方法通常情况下不直接调用

selection.call(zoom.transform, d3.zoomIdentity);

zoom.scaleTo(selection, k)

指定的值直接就是最终的缩放大小.

zoom.scaleBy(selection, k)

当前基础上进行的，会累积.

zoom.extent([extent])

extent设置视口的范围。extent以 [[x0, y0], [x1, y1]]的形式定义。[x0, y0]表示视口左上角的坐标，[x1, y1]表示视口右下角的坐标。
extent也可以定义为返回 [[x0, y0], [x1, y1]]的函数。如果是一个函数，则会为每个被选中的元素调用，并传递 d和索引 i

如果没有指定，则返回当前的extent，默认为[[0, 0], [width, height]]。

zoom.scaleExtent([extent])

zoom.translateExtent([extent])

设置或获取平移区间，以[[x0, y0], [x1, y1]]表示。默认为[[-∞, -∞], [+∞, +∞]]

zoom.duration([duration])

设置或获取双击放大时的时间间隔。默认为250ms。

zoom.interpolate([interpolate])