我正在使用d3构建交互式图形可视化工具。我编写了一个名为showNeighbors(nodeIndex)
的函数,它可以直观地突出显示给定节点的邻居。请考虑以下两个调用此函数的代码片段:
显示用户点击的节点的邻居:
svg.selectAll(".node")
.on("click", function(d, i) {
showNeighbors(i);
d3.event.stopPropagation();
});
按顺序显示每个节点的邻居:
svg.select("body")
.on("keydown", function() {
var i = 0;
setInterval(function() {
showNeighbors(i);
i++;
}, 100);
});
我注意到对于大型图形(5000多个节点),第一个事件处理程序非常慢,而第二个事件处理程序非常快:如果单击某个节点,则必须等待几秒钟才能显示{{1}要调用的函数,但是如果你按一个键,那么节点会按照你想要的那样快速地开始突出显示。
我从这个(以及其他实验)中学到的是,在定位需要处理click事件的节点时会有相当大的开销:两个示例之间的唯一区别是传递给{的参数{1}}函数在第一个片段中是事件驱动的,但在第二个片段中是确定性的。
所以我的问题是:我可以以某种方式加快第一个片段吗?如果有必要,我愿意做出一些妥协;例如,如果单击事件处理得非常快,例如我选择的100个节点,即使其余部分非常慢,也可以。有什么想法吗?
一个完整的工作示例,说明处理点击事件的延迟(稍后添加):
showNeighbors