d3.js操作svg

最近有个需求需要用d3来操作svg文件实现svg的缩放及拖拽，同时可以在svg上打点，并对点位进行拖拽，记录下实现过程。

d3版本用的是d3.v2.js

具体代码如下：

/*
 *svg拖拽和缩放
 *.scale (1.0)默认缩放为1
 *.scaleExtent([1, 5])缩放比例尺区间
*/
var zoom = d3.behavior.zoom().translate([0, 0]).scale (1.0).scaleExtent([1, 5]).on("zoom", zoomed);
	
//拖拽和缩放事件
function zoomed() {
    d3.selectAll('svg').attr("transform", "translate(" + d3.event.translate + ")" + "scale(" + d3.event.scale + ")");
}

/*
 *操作svg
 *.call(zoom)拖拽/缩放事件
 *.on("dblclick.zoom", null)关闭鼠标双击时缩放功能
*/
var svg = d3.select('svg').call(zoom).on("dblclick.zoom", null);

//----------下面是对图片的拖拽--------------

    //image图标拖拽
	var drag = d3.behavior.drag().on('dragstart', function () {
	}).on('drag', function () {
		//拖拽中事件
		var dx = d3.event.x;
		var dy = d3.event.y;
		d3.select(this).attr("