<!DOCTYPE html>
<
html
>
<
head
>
<
meta
charset
=
"utf-8"
>
</
script
>
<
style
>
svg {
background-color: #de7d45;
display: block;
};
</
style
>
</
head
>
<
body
>
<
center
>
<
h1
style
=
"color: green;"
>
Geeksforgeeks
</
h1
>
<
h3
>D3.js | selection.interrupt() Function</
h3
>
<
button
>Stop</
button
>
<
svg
width
=
"500"
height
=
"150"
></
svg
>
<
script
>
const svg = d3.select("svg");
const local = d3.local();
const button = d3.select("button");
const circle = svg.append("circle")
.attr("r", 25)
.attr("cx", 30)
.attr("cy", 75)
.style("fill", "green")
.style("stroke", "black");
circle.transition()
.delay(5000)
.duration(10000)
.ease(d3.easeLinear)
.attr("cx", 580)
.on("interrupt", function() {
local.set(this, +d3.select(this)
.attr("cx"))
});
button.on("click", function() {
if (d3.active(circle.node())) {
circle.interrupt();
this.textContent = "Resume";
}
else {
circle.transition()
.ease(d3.easeLinear)
.duration(function() {
return 10000 * (560 -
local.get(this)) / 560;
})
.attr("cx", 580)
this.textContent = "Stop";
}
})
</
script
>
</
center
>
</
body
>
</
html
>