Javascript 重置d3.js中的setTimeout

我正在d3.js中运行可视化-下面是一个：

我在另一个函数中有一个setTimeout，如下所示：

// initialize layout (for reset button)
var initForce = function() {

// clear svg
  container.selectAll('*').remove();

  force
    .nodes(graph.nodes)
    .links(graph.links)
    .start();


  graph.links.forEach(function(d, i) {

    setTimeout(function() {

...

我有一个复位按钮。当我按下按钮时，我希望可视化重新启动。代码如下：

 // When the user clicks on the "Reset" button, we'll
// start the whole process over again.


d3.select('#reset').on('click', function() {




// my attempt at stopping setTimeOut
  if (force) {
        force.stop();
    }

  // Re-initialize to start over again.

initForce();

});

---

我的问题是，当按下重置按钮时，它没有清除设置超时。我一直在尝试添加clearTimeout，因为很明显，当我点击reset时，我所做的就是启动一个单独的计时器，而不是删除第一个计时器。我似乎不知道如何引用原始设置超时-我尝试了上面的另一种方法。

您可以使用3个步骤解决此问题

在为每个链接创建超时函数时，创建一个数组变量来存储超时函数。例如：-var超时=[]

在迭代过程中，将每个超时函数推送到新的超时数组

然后单击重置按钮清除所有超时功能。 代码段：

变量图={ 节点：[{ 姓名:1,， 评级：90， 身份证号码：2951 }, { 姓名:2,， 评级：80， 身份证号码：654654 }, { 姓名:3,， 评级：80， 身份证号码：6546544 }, { 姓名:4,， 评级：1， 身份证号码：68987978 }, { 姓名:5,， 评级：1， 身份证号码：9878933 }, { 姓名:6， 评级：1， 身份证号码：6161 }, { 姓名:7,， 评级：1， 身份证号码：64654 }, { 姓名:8， 评级：20， 身份证号码：354654 }, { 姓名:9， 评级：50， 身份证号码：8494 }, { 姓名:10， 评级：1， 身份证号码：6846874 }, { 姓名:11， 评级：1， 身份证号码：5487 }, { 姓名:12,， 评级：80， id:parfum_kenzo }, { 姓名:13， 评级：1， 身份证号码：65465465 }, { 姓名:14， 评级：90， id:jungle_de_kenzo }, { 姓名:15， 评级：20， 身份证号码：313514 }, { 姓名:16， 评级：40， 身份证号码：36543614 }, { 姓名：17， 评级：100， 身份证号码：Yann_YA645 }, { 姓名：18， 评级：1， 身份证号码：97413 }, { 姓名：19， 评级：1， 身份证号码：97414 }, { 姓名:20,， 评级：100， 身份证号码：976431231 }, { 姓名：21， 评级：1， 身份证号码：9416 }, { 姓名:22,， 评级：1， 身份证号码：998949 }, { 姓名：23， 评级：100， 身份证号码：984941 }, { 姓名：24， 评级：100， 身份证号码：99843 }, { 姓名:25， 评级：1， 身份证号码：94915 }, { 姓名:26， 评级：1， 身份证号码：913134 }, { 姓名:27， 评级：1， 身份证号码：9134371 }, { 姓名:28， 评级：1， 身份证号码：971 }], 链接：[{ 资料来源：6， 目标：5， 价值：6， 标签：publishedOn }, { 资料来源：8， 目标：5， 价值：6， 标签：publishedOn }, { 资料来源：7， 目标：1， 价值：4， 标签：containsKeyword }, { 资料来源：8， 目标：10， 价值：3， 标签：containsKeyword }, { 资料来源：7， 目标：14， 价值：4， 标签：publishedBy }, { 资料来源：8， 目标：15， 价值：6， 标签：publishedBy }, { 资料来源：9， 目标：1， 价值：6， 标签：描述 }, { 资料来源：10， 目标：1， 价值：6， 标签：描述 }, { 资料来源：16， 目标：1， 价值：6， 标签：manageWebsite }, { 资料来源：27， 目标：27， 价值：6， 标签：单独 }, { 资料来源：16， 目标：2， 数值：5， 标签：manageWebsite }, { 资料来源：16， 目标：3， 价值：6， 标签：manageWebsite }, { 资料来源：16， 目标：4， 价值：6， 标签：manageWebsite }, { 资料来源：19， 目标：18， 价值：2， 标签：postedOn }, { 资料来源：18， 目标：1， 价值：6， 标签：childOf }, { 资料来源：17， 目标：19， 数值：8， 标签：描述 }, { 资料来源：18， 目标：11， 价值：6， 标签：containsKeyword }, { 资料来源：17， 目标：13， 价值：3， 标签：containsKeyword }, { 资料来源：20， 目标：13， 价值：3， 标签：containsKeyword }, { 资料来源：20， 目标：21， 价值：3， 标签：postedOn }, { 资料来源：22， 目标：20， 价值：3， 标签：postedOn }, { 资料来源：23， 目标：21， 价值：3， 标签：manageWebsite }, { 资料来源：23， 目标：24， 价值：3， 标签：manageWebsite }, { 资料来源：23， 目标：25， 价值：3， 标签：manageWebsite }, { 资料来源：23， 目标：26， 价值：3， 标签：manageWebsite }] } var保证金={ 前-5名， 右：-5， 底部：-5， 左：-5 }; 变量宽度=400-margin.left-margin.right， 高度=400-margin.top-margin.bottom； var color=d3.scale.category20； var-force=d3.layout.force .charge-200 .linkDistance50 .尺寸[宽度+边距.左侧+边距.右侧，高度+边距.顶部+边距.底部]； var zoom=d3.behavior.zoom .scaleExtent[ 1, 10] .onzoom，缩放； var drag=d3.behavior.drag .origind{ 返回d； } .ondragstart，dragstarted .昂德拉格，被拖走了 .ondragend，德拉根德； var超时=[]； var svg=d3.selectmap.appendsvg .attrwidth，width+margin.left+margin.right .attrhight，height+margin.top+margin.bottom .附录 .attransform，translate+margin.left+，+margin.right+ .callzoom； var rect=svg.appendrect .宽度，宽度 .身高，身高 .stylefill，无 .stylepointer事件，全部； var container=svg.appendg； //初始化重置按钮的布局 var initForce=函数{ //清除svg 容器。选择所有“*”。删除； //我试图停止设置超时 如果强制{ 强制停止； } //柜台 var=n=0； 武力 .nodesgraph.nodes .linksgraph.links 开始 graph.links.forEachfunctiond，i{ 超时。pushsetTimeoutfunction{ var nodes=graph.nodes.filterFunction，i{ 返回d.source.index==i | | d.target.index==i }; //添加一个到计数器 计数器n=计数器n+1； //添加边 集装箱附加线 datumd先生 .attr类，链接 //延迟在线显示-我是否需要i*10？？？ //延迟是节点延迟的一半。 过渡 .stylestroke宽度，0 .我{ 返回i*10； }//我需要这个吗？ .持续时间350 .stylestroke宽度，函数d{ 返回Math.sqrtd.value； }; nodes.forEachfunctionnode{ var nodeG=container.appendg .datumnode .attr类、节点 .attrcx，已运行{ 返回d.x； } .消耗性，功能性{ 返回d.y； } .calldrag； //添加节点 圆 .style'opacity'，0 .attrr，已运行{ 返回d.权重*2+5； } .stylefill，函数{ 返回颜色1/d.额定值； } //延迟在线显示-我是否需要i*10？？？ //延迟是节点延迟的一半。 过渡 .我{ 返回i*10； } .持续时间700 .style'opacity'，1； }; 强制恢复； }，700*i； }; force.ontick，函数{ container.selectAll.link.attrx1，函数D{ 返回d.source.x； } .attry1，功能正常{ 返回d.source.y； } .attrx2，函数为{ 返回d.target.x； } .attry2，函数d{ 返回d.target.y； }; container.selectAll.node.attrtransform，函数D{ 返回translate+d.x+，+d.y+； }; }; var linkedByIndex={}； graph.links.forEachfunctiond{ linkedByIndex[d.source.index+，+d.target.index]=1； }; 功能已连接到EDA，b{ 返回linkedByIndex[a.index+，+b.index]| | linkedByIndex[b.index+，+a.index]； } container.selectAll.node.onmouseover，函数D{ container.selectAll.node.classednode-active，函数o{ thisOpacity=isConnectedd，o？真：假； this.setAttribute'fill-opacity'，thisOpacity； 返回此不透明度； }; container.selectAll.link.classedlink-active，函数o{ 返回o.source==d | | o.target==d？true:false； }; d3.选择this.classednode-active，true； d3.选择this.selectcircle.transition .持续时间700 .attrr，d.重量*2+12*1.5； } .onmouseout，函数{ container.selectAll.node.classednode-active，false； container.selectAll.link.classedlink-active，false； d3.选择this.selectcircle.transition .持续时间700 .attrr，d.重量*2+12； }; }; //初始力端 函数点类型{ d、 x=+d.x； d、 y=+d.y； 返回d； } 函数放大{ container.attrtransform，translate+d3.event.translate+scale+d3.event.scale+； } 函数dragstartedd{ d3.event.sourceEvent.stopPropagation； d3.选择this.classeddragging，true； 强制启动； } 函数draggedd{ d3.选择this.attrcx，d.x=d3.event.x.attrcy，d.y=d3.event.y； } 函数dragended{ d3.选择this.classeddragging，false； } //当用户单击重置按钮时，我们将 //重新开始整个过程。 d3.选择“重置”。单击“重置”功能{ //重新初始化以重新开始。 timeOuts.foreachFunctionTimeoutn{ cleartimeouttimeoutn； }; 初始力； }; //现在我们可以初始化force布局，使其就绪 //跑。 初始力； 身体{ 保证金：0； 位置：固定； 排名：0； 右：0； 底部：0； 左：0； } .节点{ 行程：fff； 笔划宽度：1.5px； } .节点处于活动状态{ 行程：555； 笔划宽度：1.5px； } .链接{ 行程：555； 笔划不透明度：.3； } .链接处于活动状态{ 笔画不透明度：1； } 上 嗯{ 填充：无； 指针事件：全部； } 地图{ 边框：2px555虚线； 宽度：400px； 高度：400px； } 钮扣{ 位置：绝对位置； 宽度：40px； 高度：30px； } 纽扣套{ 边缘顶部：80px； 左边距：8px； }

---

这只是一个输入错误：clearTimeout，不是clearTimeout。检查小提琴：小提琴实际上没有clearTimeout。如果你反复按“重置”按钮，你可以看到几个节点开始同时出现，而不是一次出现一个节点。@GerardoFurtado的小提琴在chrome中对我有用。这可能是因为您正在向clearTimeout传递一个函数。