縮放事件覆蓋d3js中的拖動行爲

Question

我正在嘗試爲使用d3js的圓項目實現拖動和縮放事件處理程序。我已經爲下面給出的兩個事件添加了行爲

var circle = svg.append("circle") 
    .attr("fill", "green") 
    .attr("opacity", 0.6) 
    .attr("cx", 100) 
    .attr("cy", 100) 
    .attr("r", 13) 
    .call(d3.behavior.drag().on("drag", drag)) 
    .call(d3.behavior.zoom().on("zoom", zoom)); 

沒有縮放對象，拖動工作正常。在放大/縮小對象後，拖動不起作用，但所有包含mousedown的事件都會作爲「縮放」事件捕獲。

完整的源請參閱http://jsfiddle.net/xTaDC/

看來，我不明白「d3.behavior」。 https://github.com/mbostock/d3/blob/master/examples/mercator/mercator-zoom-constrained.html只提供縮放處理程序並處理拖動和縮放。

我在這裏做錯了什麼？

Answer 1

據我所知，d3的縮放行爲已經處理拖動，所以拖動的東西是多餘的。嘗試使用縮放的d3.event.translate（這是一個2元素數組，因此如果只想獲得x值，則可以使用d3.event.translate [0]）將Drag中的功能複製到你的縮放。

附加提示：爲了讓自己更輕鬆，請確保您將自己的調用（縮放）應用於您試圖拖動的任何對象的父級。這將防止緊張和不穩定的行爲。

來源當然是d3維基。 「 」此行爲會自動創建事件偵聽器，以處理在容器元素上縮放和平移手勢。支持鼠標和觸摸事件。 https://github.com/mbostock/d3/wiki/Zoom-Behavior

Answer 2

附加您的圖形敏感事件區域（必須是最後追加）：

var rect = svg.append("svg:rect") 
    .attr("class", "pane") 
    .attr("width", w) 
    .attr("height", h); 

後（不包括）本區域

rect.call(d3.behavior.zoom().x(x).scaleExtent([0.5, 4]).on("zoom", draw)); 

和繪製函數添加事件管理是

function draw() { 
    svg.select("g.x.axis").call(xAxis); 
    svg.select("g.y.axis").call(yAxis); 
    svg.select("path.area").attr("d", area); 
    svg.select("path.line").attr("d", line); 
} 

看到這個例子：https://groups.google.com/forum/?fromgroups=#!topic/d3-js/6p7Lbnz-jRQ%5B1-25-false%5D

Answer 3

我面臨類似的問題，並通過覆蓋縮放的其他子事件來解決它。

添加以下代碼縮放和拖動事件偵聽器之後

.on("mousedown.zoom", null) 
.on("touchstart.zoom", null) 
.on("touchmove.zoom", null) 
.on("touchend.zoom", null); 

所以完整的代碼看起來像

var circle = svg.append("circle") 
    .attr("fill", "green") 
    .attr("opacity", 0.6) 
    .attr("cx", 100) 
    .attr("cy", 100) 
    .attr("r", 13) 
    .call(d3.behavior.drag().on("drag", drag)) 
    .call(d3.behavior.zoom().on("zoom", zoom)) 
    .on("mousedown.zoom", null) 
    .on("touchstart.zoom", null) 
    .on("touchmove.zoom", null) 
    .on("touchend.zoom", null);