Transition trigger to not work till another transition is complete - d3.js

Question

I have 2 circles that move right when clicked. Transition takes 10 sec.
What I want
Requirement 1: If circle 1 is in transition, clicking circle 2 should not trigger transition
Requirement 2: If circle 1 is in transition, clicking circle 2 should stop circle 1 at its current position and start transition for circle 2
here is my code
let svg = d3.select("body").append("svg").attr("width", 1800).attr("height", 1800)
svg.selectAll("circles")
.data([100,200])
.enter()
.append("circle")
.attr("class","zubi")
.attr("cx",50)
.attr("cy",d=>d)
.attr("r",30)
.on("click",function(){
d3.select(this)
.transition()
.duration(10000)
.attr("transform","translate(800)")
})

Answer 1

One way to block any transitions is to just remove the handler when the transition is started, and put it back when it's done:
let svg = d3.select("body").append("svg").attr("width", 600).attr("height", 300);
function myClickFunction(d, i) {
circles.on("click", null);
d3.select(this)
.transition()
.duration(5000)
.attr("transform", "translate(300)")
.on("end", () => circles.on("click", myClickFunction));
}
let circles = svg.selectAll("circles")
.data([100, 200])
.enter()
.append("circle")
.attr("class", "zubi")
.attr("cx", 50)
.attr("cy", d => d)
.attr("r", 30)
.on("click", myClickFunction)
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
Other possibilities are to add/remove classes, or to get the active transition using d3.active.
You can use d3.selection.interrupt to cancel any currently running transitions on a selection. I gave the transition a name so you can more fine-grained control. You can have multiple transitions run side by side if you want - if no name is given all transitions are interrupted.
let svg = d3.select("body").append("svg").attr("width", 600).attr("height", 300)
let circles = svg.selectAll("circles")
.data([100, 200])
.enter()
.append("circle")
.attr("class", "zubi")
.attr("cx", 50)
.attr("cy", d => d)
.attr("r", 30)
.on("click", function(d, i) {
// Cancel any running transitions
circles.interrupt("circle-transform");
d3.select(this)
.transition("circle-transform")
.duration(5000)
.attr("transform", "translate(300)")
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>