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("transform", `translate(${dx}, ${dy})`);
	}).on('dragend', function () {
		//拖拽结束事件
		var translate = d3.select(this).attr("transform").slice(10, -1).split(",");
		var point = {};
        //image的id
		point.pointId = d3.select(this).attr("id").split("_")[1];
        //image的left
		point.left = parseInt(translate[0]);
        //image的top
		point.top = parseInt(translate[1]);
        //更新当前图标的坐标系  
		var ajax = new $ax(Feng.ctxPath + "/point/update", function (data) {
        }, function (data) {});
        ajax.set(point);
        ajax.start();
	});

    //image图标的地址
    var imgPath = point.iconPath;
    
	//加载图标
	svg.append("image")
	.attr("id", "img_"+point.pointId)
	.attr("xlink:href", imgPath)
	.attr("width", point.width)
	.attr("height", point.height)
	.attr("transform", `translate(${point.left}, ${point.top})`)
	.call(drag)
    .append("svg:title").text(point.name+"("+point.left+","+point.top+")");