在兩次同時觸摸時D3縮放失敗

我在移動設備上遇到D3（版本4）的問題，在完全同時觸摸兩個元素時，縮放功能似乎不起作用。我測試的唯一設備是iPhone 7（iOS 10.1.1），而且在移動Safari和Chrome瀏覽器應用程序中都存在問題。在兩次同時觸摸時D3縮放失敗

我創建了一個簡單的例子（下面），我可以重現這個問題，它只是在黃色背景上有兩個矩形。在我的iPhone：

如果我摸到他們在確切同時用兩個手指，變焦將不變化，因爲我除了和一起移動我的手指。
但是，如果觸摸是而不是正好在同一時間（即使稍微分開），縮放工作正常。

我是否錯過了導致這種行爲的東西？我試着尋找同樣的問題，找不到任何東西......但考慮到D3的流行，這肯定是我做錯了。

這對我的用戶造成了一個問題。很多時候，觸摸事件並不完全是同一時間，但觸摸事件通常會同時發生，而且它看起來像用戶像變焦被破壞或需要多次嘗試才能成功。非常令人沮喪。

var svg = d3.select('#svgLocation').append('svg') 
 
\t .attr('style', 'width:300px;height:300px;background-color:yellow;'); 
 

 
var grp = svg.append("g"); 
 
grp.append("path").attr('d','M25,25 275,25 275,125 25,125Z'); 
 
grp.append("path").attr('d','M25,175 275,175 275,275 25,275Z'); 
 

 
var zoom = d3.zoom() 
 
    .scaleExtent([1, 10]) 
 
    .on("zoom", function() { grp.attr("transform", d3.event.transform) }); 
 
svg.call(zoom);

#svgLocation { 
 
    width:100%; 
 
    height:100%; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <script src="http://d3js.org/d3.v4.min.js"></script> 
 
    </head> 
 

 
    <body> 
 
    <div id="svgLocation"></div> 
 
    </body> 
 
    
 
</html>

來源

2016-11-23 codinginthevoid

我加入d3.v4.js一些調試代碼，迄今已縮小了問題倒在變焦touchstarted功能。在當變焦失敗的情況下，它確實看到兩個觸摸事件進來的...但由於某些原因，「G」的手勢沒有在第二次觸摸事件到達時填充touch0值。 – codinginthevoid

所以，這樣做似乎是在D3v4的錯誤，影響至少一個設備（iPhone運行iOS 10 7設備，無論是Safari和Chrome瀏覽器）。它不會影響所有設備：當我在Windows 7全功能於一體的觸摸式計算機上嘗試時，我無法重現該問題。

在iPhone上，如果兩次觸碰同時發生（或幾乎如此），則會發生兩次觸發事件。但是，在兩個事件中，「touches」屬性都將包含一個這兩個觸摸的數組。（在「changedTouches」屬性將包含僅僅只有相應的觸摸。）

（請注意，Windows觸摸設備上的「摩的」屬性第一的兩個事件的只有一個單一的觸摸值。）

在D3 zoom touchstarted函數中，手勢的「開始」僅在觸摸次數與changedTouches的計數匹配時觸發......這由以下內容中的「if」語句（Commit #17）執行：

var g = gesture(this, arguments), 
    touches = event.changedTouches, 
    n = touches.length, i, t, p; 

[...] 

if (event.touches.length === n) { 
    touchstarting = setTimeout(function() { touchstarting = null; }, touchDelay); 
    interrupt(this); 
    g.start(); 
}

我試着評論出「if」語句，所以g.start（）總是被調用（即使有一個重複兩次觸摸和一次touchChanged）......並立即開始在iPhone上工作。雙擊放大也繼續工作，這是添加此檢查的提交。

但是，我很猶豫是否將此留在我的項目中;顯然這是因爲某種原因，如果語句檢查被放在那裏。我擔心通過禁用它，我會打開一些我不知道的邊緣情況。我會將這個問題發佈到Github項目上，希望能夠找到解決這個問題的方法。

來源

2016-11-25 23:57:20 codinginthevoid

在兩次同時觸摸時D3縮放失敗

回答

相關問題