如何刪除可拖動組中的一個元素上的拖動事件？

Question

我有一個可拖動的組，並且該組中的一個元素調用了單擊事件。現在我想刪除該元素上的拖動事件。見http://jsfiddle.net/gLvyouct/1/

我曾嘗試以下方法：

• 添加circle.call(drag).on(".drag", null);

  不工作，我不知道爲什麼。

• 只有呼籲rects

  拖動事件是否會影響拖動事件的流暢性。元素在被拖動時發抖。

• 在拖拽動作定義if (d3.event.sourceEvent.target.nodeName == "circle") return;

  不工作。當鼠標位於圓形邊緣時，該組仍會移動。

Answer 1

這是一個棘手的，因爲如果綁定拖動事件到rect然後移動g該RECT所屬所示，在d3.event對象計算出的dx和dy值將每一後弄亂事件發生，因爲這些計算值已經轉化爲拖拽行爲所綁定的元素的本地座標系統。所以，我們可以自己做一些類似的工作來解決這個問題。這裏的訣竅是知道我們真的只需要在拖動動作期間找出鼠標位置x和y的變化。而且這個D3使得d3.event對象的sourceEvent屬性可用。

所以使用底層sourceEvent在d3.event對象來獲取clientX和clientY位置，纔算最後的值和當前值，它會告訴你，你需要多遠額外給translate的g元素之間的差異。您還需要初始化您正在比較的值，以免在開始時出現隨機跳躍。幸運的是，我們可以使用dragstart事件來做到這一點。

一旦我們發現了這一點，我們可以將drag處理程序綁定到rect，我們應該很好。

下面是一個正在做我所描述的例子。

var g = d3.select("#mysvg").append("g"); 
 
var rect = g.append("rect").attr("height", 100).attr("width", 100); 
 
var circle = g.append("circle").attr("cx", 200).attr("cy", 200).attr("r", 50).attr("fill", "black"); 
 
var transX = 0, transY = 0; 
 
var lastX = 0, lastY = 0; 
 

 
var drag = d3.behavior.drag().on("drag", function() { 
 
    transX += d3.event.sourceEvent.clientX - lastX; 
 
    transY += d3.event.sourceEvent.clientY - lastY; 
 
    g.attr("transform", "translate(" + transX + "," + transY + ")"); 
 
    lastX = d3.event.sourceEvent.clientX; 
 
    lastY = d3.event.sourceEvent.clientY; 
 
}).on("dragstart", function() { 
 
    lastX = d3.event.sourceEvent.clientX; 
 
    lastY = d3.event.sourceEvent.clientY; 
 
}); 
 
rect.call(drag); 
 

 
circle.on("click", function() { 
 
    var now_color = d3.select(this).attr("fill"); 
 
    if (now_color == "black") 
 
     d3.select(this).attr("fill", "green"); 
 
    else 
 
     d3.select(this).attr("fill", "black"); 
 
}); 
 

 
//circle.call(drag).on(".drag", null);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<svg id="mysvg" height="800" width="800"></svg>