D3在pack佈局方式下zoom和drag的衝突

在頁面上繪製氣泡圖要求可以縮放且可以拖動其中的氣泡。

按照要求需要完成三個方面的問題：

1、爲svg添加縮放事件；

2、爲氣泡添加拖動事件；

3、拖動氣泡的時候需要聯動氣泡上的文字一起拖動；

下面我說一下自己的實現和問題，最後貼出代碼。爲svg添加縮放事件很容易就實現了，在創建的svg畫布後面添加call事件回調zoom動作就好了；然後爲每個氣泡添加call事件回調drag動作，在調用動作中需要解決問題3，就是當氣泡座標變動時也同樣變動文字的座標。運行了一下程序發現氣泡在拖動的時候受到了牽制，就是可以拖動的範圍很小。將縮放時間註釋後，運行程序再拖動的時候就沒有問題了。後來想了一下應該是js事件的傳播造成的就給zoom和drag都添加了中止傳播的代碼，運行了一下果然好了。下面是縮放和拖拽的具體代碼：

縮放：

var zoom = d3.behavior.zoom().scaleExtent([0, 5]).on("zoom", zoomed).on("zoomstart",         
    function () {
    	d3.event.sourceEvent.stopPropagation();
	}).on("zoomend", function () {
	    d3.event.sourceEvent.stopPropagation();
	});
function zoomed() {
	svg.selectAll("g").attr("transform", 
        "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}

拖拽：

var drag = d3.behavior.drag().on("drag",dragmove).on("dragstart", function () {
        d3.event.sourceEvent.stopPropagation();
    }).on("dragend", function () {
	    d3.event.sourceEvent.stopPropagation();
	});
function dragmove(d){
    d3.select(this).attr("cx", d.cx = d3.event.x).attr("cy", d.cy = d3.event.y);
    d3.select(this.parentNode).selectAll("tspan")
        .attr("x", d.cx = d3.event.x)
        .attr("y", function(d){
            var offset = 0;
			var thisStr = this.textContent;
			if(thisStr.indexOf('個') > 0){
				offset = 0;
			}else if(thisStr.indexOf('%') > 0){
				offset = 12;
			}else{
				offset = -12;
			}
        return d3.event.y + offset;
	});
}