La función brush.move() en D3.js se usa para establecer la selección activa del pincel en el grupo especificado.
Sintaxis:
brush.move(group, selection);
Parámetros: esta función acepta un solo parámetro como se mencionó anteriormente y se describe a continuación
- grupo: este parámetro es el grupo especificado en el que se implementa el pincel.
- selección: este parámetro es una array de números.
Valor devuelto: esta función devuelve la array que define la selección de pincel para ese elemento.
Los siguientes programas ilustran la función brush.move() en D3.js
Ejemplo 1:
<!DOCTYPE html>
<html>
<head>
<script src=
"https://d3js.org/d3.v5.min.js">
</script>
</head>
<body>
<center>
<h1 style="color:green;">GeeksForGeeks</h1>
<h3>D3.js | brush.move() Function </h3>
<button>Click</button>
<br>
<br>
<svg style="background-color: lightgreen;"
width="500" height="100">
</svg>
<script>
// Selecting SVG element
const svg = d3.select("svg");
const g = svg.append("g");
// Creating a brush using the
// d3.brush function
g.call(d3.brush());
// Use of brush.move() function
d3.select("button").on("click", function() {
g.call(d3.brush().move, [
[100, 0],
[400, 100]
])
});
</script>
</center>
</body>
</html>
Producción:
Ejemplo 2:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src=
"https://d3js.org/d3.v4.min.js">
</script>
<style>
circle {
fill-opacity: 0.2;
}
circle.active {
fill-opacity: 0.8;
stroke: red;
fill: green;
}
</style>
</head>
<body>
<center>
<h1 style="color:green;">GeeksForGeeks</h1>
<h3>D3.js | brush.move() Function </h3>
<svg width="600" height="300"></svg>
<script>
var data = d3.range(100).map(Math.random);
var svg = d3.select("svg"),
margin = {top: 50, right: 50,
bottom: 50, left: 50},
width = +svg.attr("width") -
margin.left - margin.right,
height = +svg.attr("height") -
margin.top - margin.bottom,
g = svg.append("g")
.attr("transform", "translate("
+ margin.left + ", " + margin.top + ")"
);
var x = d3.scaleLinear().range([0, width]),
y = d3.randomNormal(height / 2, height / 8);
var brush = d3.brushX()
.extent([[0, 0], [width, height]])
.on("start brush end", brushmoved);
g.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0, 0)")
.call(d3.axisTop(x));
var circle = g.append("g")
.attr("class", "circle")
.selectAll("circle")
.data(data)
.enter().append("circle")
.attr("transform", function (d) {
return "translate("
+ x(d) + ", " + y() + ")";
})
.attr("r", 10);
var gBrush = g.append("g")
.attr("class", "brush")
.call(brush);
gBrush.call(brush.move, [0.3, 0.5].map(x));
var bs = "";
function brushmoved() {
var s = d3.event.selection;
if (d3.event.type === "start"){
bs = d3.event.selection;
} else if (d3.event.type === "end"){
if (bs[0] !== s[0] && bs[1] !== s[1]) {
console.log('moved both');
} else if (bs[0] !== s[0]) {
console.log('moved left');
} else {
console.log('moved right');
}
}
if (s == null) {
handle.attr("display", "none");
circle.classed("active", false);
} else {
var sx = s.map(x.invert);
circle.classed("active", function (d) {
return sx[0] <= d && d <= sx[1];
});
handle.attr("display", null)
.attr("transform", function (d, i) {
return "translate("
+ s[i] + ", " + height / 2 + ")";
});
}
}
</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