加快d3中的事件处理速度

时间:2015-11-28 05:55:59

标签: javascript d3.js javascript-events

我正在使用d3构建交互式图形可视化工具。我编写了一个名为showNeighbors(nodeIndex)的函数,它可以直观地突出显示给定节点的邻居。请考虑以下两个调用此函数的代码片段:

  1. 显示用户点击的节点的邻居:

    svg.selectAll(".node") .on("click", function(d, i) { showNeighbors(i); d3.event.stopPropagation(); });

  2. 按顺序显示每个节点的邻居:

    svg.select("body") .on("keydown", function() { var i = 0; setInterval(function() { showNeighbors(i); i++; }, 100); });

  3. 我注意到对于大型图形(5000多个节点),第一个事件处理程序非常慢,而第二个事件处理程序非常快:如果单击某个节点,则必须等待几秒钟才能显示{{1}要调用的函数,但是如果你按一个键,那么节点会按照你想要的那样快速地开始突出显示。

    我从这个(以及其他实验)中学到的是,在定位需要处理click事件的节点时会有相当大的开销:两个示例之间的唯一区别是传递给{的参数{1}}函数在第一个片段中是事件驱动的,但在第二个片段中是确定性的。

    所以我的问题是:我可以以某种方式加快第一个片段吗?如果有必要,我愿意做出一些妥协;例如,如果单击事件处理得非常快,例如我选择的100个节点,即使其余部分非常慢,也可以。有什么想法吗?

    一个完整的工作示例,说明处理点击事件的延迟(稍后添加):

    showNeighbors

0 个答案:

没有答案