D3.js 是否可以消除d3渲染鼠标位置时的延迟？

我有一些代码在光标位置上方显示SVG项。我注意到，如果该对象仅落后于光标一帧，则它落后于光标的程度超出了我的预期

var宽度=600，
高度=200；
变量鼠标位置=[0,0]；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
var cursor=svg.append（'circle'）
.attr（“r”，2）
.attr（“填充”、“暗蓝色”）；
//更新鼠标位置
d3.选择（窗口）.on（“mousemove”，（）=>{
mouseLocation=d3.mouse（svg.node（））；
});
//显示鼠标
d3.定时器（函数（）{
attr（“transform”，“translate”（'+mouseLocation+'））；
});
在这个答案的第一个版本中（查看编辑历史记录），我尝试了
d3.interval
和
setInterval
，没有区别

然而，我相信，这个问题可能没有答案（在OP想要什么的意义上），因为延迟取决于D3处理
mousemove
事件。这里的问题也可能与D3无关，但这取决于用户代理（浏览器）如何控制
mousemove
事件频率

如果我们将用于移动圆的代码放在非常
mousemove
函数中，就可以看到这一点：

d3.select(window).on("mousemove", () => { 
    mouseLocation = d3.mouse(svg.node()); 
    cursor.attr("transform", 'translate(' + mouseLocation + ')');
});

而滞后仍然是一样的：


var宽度=600，
高度=200；
变量鼠标位置=[0,0]；
var svg=d3.选择（“div”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
var cursor=svg.append（'circle'）
.attr（“r”，2）
.attr（“填充”、“暗蓝色”）；
//更新鼠标位置
d3.选择（“div”）。在（“mousemove”上，（）=>{
attr（“transform”，“translate（+（d3.event.pageX-16）+”，“+（d3.event.pageY-16）+”）；
});

冒着有点迂腐的风险，你无法消除滞后；您可以做的是将其降低到可接受的水平。@而且，是的，将其降低到<1帧（~17毫秒）相当于将其消除，仅供参考，
d3.interval（回调，1毫秒）
和
setInterval（函数，1毫秒）
具有相同的效果，仍然是一个明显的滞后。类似的：这可能会持续好几天。。。在扩展了演示并使用Chrome的时间线工具进行了一些分析之后，我的发现是：1）这不是计算、获取事件数据、选择元素等的速度问题。这些都很快，在计划下一次喷漆之前，它们很快就会完成。2） 鼠标事件和重新绘制之间几乎没有延迟。事实上，我没有发现下一个动画帧没有处理mouseevent的情况。从数据更新到重新绘制的测量延迟通常在8毫秒左右……我运行了您的代码，得到了类似的延迟。那个代码没有延迟吗？