Как правильно навесить тач-события?

Question

[darktowerk56c]

Всем привет, нашел статью по d3.js:
https://www.freecodecamp.org/news/how-to-build-his...
Попытался на текущем примере:
Feel free to check out the source code as well as the full demonstration of this tutorial.
Добавить события:
https://developer.mozilla.org/ru/docs/Web/API/Touc...
Чтобы он также работал и на мобильных устройствах, но не могу понять, что я делаю не так. Прошу вашей помощи.
Участок кода, где я добавил тач-события:

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/d9f3cd0d926af...
Если в последнем примере написать вот этот код:

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 первый раз, то отобразиться точка на предыдущей дате, при втором нажатии уже на текущей координате.