La función d3.interrupt() en D3.js se usa para interrumpir la transición activa del nombre especificado en el Node especificado y cancela cualquier transición pendiente con el nombre especificado. Esta función es similar a la función selection.interrupt() .
Sintaxis:
d3.interrupt(node[, name])
Parámetros: Esta función acepta el siguiente parámetro como se mencionó anteriormente y se describe a continuación:
- nombre: este parámetro es la instancia de transición.
- Node: este parámetro es el Node para el argumento de paso.
Valor de retorno: esta función devuelve una transición activa interrumpida.
Los siguientes programas ilustran la función d3.interrupt() en D3.js.
Ejemplo 1:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v5.min.js">
</script>
</head>
<body>
<center>
<h1 style="color: green;">
Geeksforgeeks
</h1>
<h3>D3.js | d3.interrupt() Function</h3>
<svg width="400" height="250"></svg>
<script>
var svg = d3.select("svg")
var circle = svg.selectAll("circle")
.data([1, 2, 3, 4])
.enter()
.append("circle")
.style("fill", "red")
.attr("cx", 50)
.attr("cy", function(d) {
return d * 50
})
.attr("r", 25)
.on("click", function() {
d3.interrupt(d3.select(this))
})
circle.transition()
.delay(function(d) {
return d * 500;
})
.duration(function(d) {
return d * 1000;
})
.attr("cx", 360)
.on("interrupt", function() {
var elem = this;
var targetValue = d3.active(this)
.attrTween("cx")
.call(this)(1);
d3.select(this).attr("cx", targetValue)
})
</script>
</center>
</body>
</html>
Producción:
Ejemplo 2:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v5.min.js">
</script>
<style>
svg {
background-color: green;
display: block;
};
</style>
</head>
<body>
<center>
<h1 style="color: green;">
Geeksforgeeks
</h1>
<h3>D3.js | d3.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", "yellow")
.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())) {
d3.interrupt(circle);
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>
Producción:
Publicación traducida automáticamente
Artículo escrito por SHUBHAMSINGH10 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA