Всем привет, нашел статью по d3.js:
https://www.freecodecamp.org/news/ho...-72214aaf6ba3/
Попытался на текущем примере:
Feel free to check out the
source code as well as the full demonstration of this tutorial.
Добавить события:
https://developer.mozilla.org/ru/doc...I/Touch_events
Чтобы он также работал и на мобильных устройствах, но не могу понять, что я делаю не так. Прошу вашей помощи.
Участок кода, где я добавил тач-события:
svg
.append('rect')
.attr('class', 'overlay')
.attr('width', width)
.attr('height', height)
// .on('mouseover', () => focus.style('display', null))
// .on('mouseout', () => focus.style('display', 'none'))
// .on('mousemove', generateCrosshair)
.on('mouseover', () => focus.style('display', null))
.on('mouseout', () => focus.style('display', 'none'))
.on('touchstart', () => focus.style('display', null))
.on('touchend', () => focus.style('display', 'none'))
.on('mousemove', generateCrosshair)
.on('touchmove', generateCrosshair);
В этом примере та же самая история:
https://blockbuilder.org/micahstubbs...0d926af7a5a1a8
Если в последнем примере написать вот этот код:
svg.append("rect")
.attr("class", "overlay")
.attr("width", width)
.attr("height", height)
.on("mouseover", function() { focus.style("display", null); })
.on("touchstart", function() { focus.style("display", null); })
.on("mouseout", function() { focus.style("display", "none"); })
.on("touchend", function() { focus.style("display", "none"); })
.on("mousemove", mousemove)
.on('touchmove', mousemove);
То баг будет следующий: если сделать touch первый раз, то отобразиться точка на предыдущей дате, при втором нажатии уже на текущей координате.