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 и до сих пор сузил проблему до функции масштабирования с сенсорным нажатием. В случаях, когда масштабирование не работает, оно видит два события касания, входящие в ... но по какой-либо причине жест g не имеет значения touch0, заполняемого во время поступления второго события касания. – codinginthevoid

Таким образом, это, кажется, ошибка в D3v4, что влияет на, по меньшей мере, одно устройство (iPhone 7 устройств под управлением IOS 10, оба Safari и Chrome браузеры). Он не влияет на все устройства: я не мог воспроизвести проблему, когда я попробовал ее на компьютере с сенсорным экраном «все в одном» Windows 7.

На iPhone, если два касания происходят одновременно (или почти так), будут происходить два события с сенсорным началом, как ожидалось. Однако на и событий свойство «касается» будет содержать массив с и касается. (Свойство «changedTouches» будет содержать только соответствующий только прикосновение.)

(Обратите внимание, что на сенсорном устройстве окна, «штрихи» свойство для первого из двух событий было только одно значение касания.)

в функции D3 увеличение touchstarted, «Старт» из жест срабатывает только, если количество штрихов соответствует кол-ву changedTouches ... это подкрепленный «если» заявление (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 масштабирование при двух одновременных касаниях

ответ

Смежные вопросы