我想问一下如何停止代码中的转换。
我有一个地图，其中包含通过csv加载的绘图，并且这些绘图已成功放置。
然后我创建了一个单击时的Circle（clickable）。删除所有具有相同颜色的图。 （通过类分组，因此在我的代码中有一个selectAll，并通过将其不透明度编辑为0来删除所有相同颜色的图）
我的过渡是重复脉冲（使用功能脉冲运行，并且在其中具有功能repeat（））
因此我可以成功删除并重新绘制我的圆图。但不是脉动图。
我正在使用d3.js v3
请查看我的代码。
srcpulse.selectAll('.ThreatPulse')
.data(data)
.enter().append('g')
.append('circle')
.attr('class', 'threatpulse-circle')
.attr('cx', function (d) {
return projection([d.srclon, d.srclat])[0];
})
.attr('cy', function (d) {
return projection([d.srclon, d.srclat])[1];
})
.attr('r', 0)
.attr('fill', 'none')
.each(pulse);
function pulse() {
var circle = srcpulse.selectAll(".threatpulse-circle")
.data(data);
(function repeat() {
circle = circle.attr('class', function (d) {
if ((d.site == "Dublin") || (d.site == "Manila") ||
(d.site == "Hazelwood")) {
return "mnk-site-pulse"
}
else { return "incident-circle" }
})
.transition()
.duration(800)
.attr('stroke-width', 1)
.attr('stroke', function (d) {
if ((d.site == "Dublin") || (d.site == "Manila") ||
(d.site == "Hazelwood")) {
console.log("dublin in");
return "lawngreen"
}
else { return "red" }
})
.attr('r', 30)
.style('opacity', 1)
.transition()
.duration(100)
.attr('r', 0)
.attr('stroke-width', 0)
.style('opacity', 0.5)
.ease('sine')
.attr('stroke', 'none')
.each("end", repeat);
})();
}
legendticker.selectAll(".Legend")
.append('circle')
.attr('class', 'legendcircle')
.attr('cx', function (d) {
return projection([-30, 40])[0];
})
.attr('cy', function (d) {
return projection([-30, 40])[1];
})
.attr('r', 20)
.style('fill', 'lawngreen')
.on('click', function (d) {
var active = mnksite.active ? false : true;
newOpacity = active ? 0 : 1;
//d3.selectAll('.mnk-site-pulse,.mnk-site')
//.remove();
//.style('opacity', 0);
d3.selectAll("#mnksite").style("opacity", newOpacity);
d3.selectAll(".mnk-site-pulse").attr('stroke', "none");
mnksite.active = active;
console.log("clicked");
});
但是正如您所看到的，过渡是重复的，即使我尝试使用.remove（）或.exit（）或.transition（），它也不会停止。.
任何想法如何解决此问题？
更新的代码：
srcpulse.selectAll('.ThreatPulse')
.data(data)
.enter().append('g')
.append('circle')
.attr('class', 'threatpulse-circle')
/*.attr('class', function (d) {
var c = "";
if ((d.site == "Dublin") || (d.site == "Manila") || (d.site == "Hazelwood")) {
return 'mnk-site-pulse'
}
else { return 'threatpulse-circle' }
})
*/
.attr('cx', function (d) {
return projection([d.srclon, d.srclat])[0];
//return projection([d.Longitude, d.Latitude])[0];
})
.attr('cy', function (d) {
return projection([d.srclon, d.srclat])[1];
//return projection([d.Longitude, d.Latitude])[1];
})
.attr('r', 0)
//.attr('fill', '#4287f5');
.attr('fill', 'none')
.each(pulse);
function pulse() {
var circle = srcpulse.selectAll(".threatpulse-circle")
.data(data);
console.log(cancelled);
(
function repeat() {
circle = circle.attr('class', function (d) {
if ((d.site == "Dublin") || (d.site == "Manila") || (d.site == "Hazelwood")) {
return "mnk-site-pulse"
}
else { return "incident-circle" }
})
.transition()
.duration(800)
.attr('stroke-width', 1)
.attr('stroke', function (d) {
if ((d.site == "Dublin") || (d.site == "Manila") || (d.site == "Hazelwood")) {
return "lawngreen"
}
else { return "red" }
})
.attr('r', 30)
.style('opacity', 1)
.transition()
.duration(100)
.attr('r', 0)
.attr('stroke-width', 0)
.style('opacity', 0.5)
.ease('sine')
.attr('stroke', 'none')
.each("end", function() {
if (cancelled === false) {
console.log("cancelled");
console.log(cancelled);
return repeat();
}
else if (cancelled === true) {
console.log("cancelled = true");
console.log(cancelled);
return endmnksitepulse()
}
});
})();
}
function endmnksitepulse() {
console.log("end");
srcpulse.selectAll(".mnk-site-pulse")
.transition()
.style('opacity', 0)
.attr('r', 0);
}
legendticker.selectAll(".Legend")
.append('circle')
.attr('class', 'legendcircle')
.attr('cx', function (d) {
return projection([-30, 40])[0];
})
.attr('cy', function (d) {
return projection([-30, 40])[1];
})
.attr('r', 20)
.style('fill', 'lawngreen')
.on('click', function (d) {
var active = mnksite.active ? false : true;
newOpacity = active ? 0 : 1;
//d3.selectAll('.mnk-site-pulse,.mnk-site')
//.remove();
//.style('opacity', 0);
d3.selectAll("#mnksite").style("opacity", newOpacity);
//d3.selectAll('.mnk-site-pulse').duration(0);
mnksite.active = active;
if (cancelled == false) {
console.log("cancelled = true");
console.log(cancelled);
cancelled = true;
}
else if ( cancelled == true) {
console.log(cancelled);
console.log("cancelled = false");
cancelled = false;
//d3.selectAll(".mnk-site-pulse").each(pulse);
}
console.log("clicked");
});
但是每当我尝试再次单击“ Click”以尝试重新启动过渡时，都会出现此错误：
答案 0 :(得分：0)
我认为您需要设置一个cancelled变量，该变量在您要停止时设置。
然后您更改重复调用自身的代码：
.each("end", repeat);
对此
.each("end", () => { if (!cancelled) repeat});