La función pie.sortValues() en D3,js se usa para establecer el comparador de valores en la función dada. Devuelve el comparador del valor actual cuando no se especifica la función del comparador, que por defecto es en orden descendente.
La diferencia entre un valor y un comparador de datos es que los dos argumentos, a y b, son valores que se derivan de la array de datos utilizando el descriptor de acceso de valor. Si el arco de b debe estar antes que el arco de a , la función de comparación debe devolver un valor mayor que 0.
Sintaxis:
pie.sortValues( compare(a, b) )
Parámetros: esta función acepta un solo parámetro como se mencionó anteriormente y se describe a continuación:
- comparador: toma una función de comparador que compara dos parámetros a y b , sobre la base de los cuales se realizaría la clasificación. Es un parámetro opcional.
Valores devueltos: Esta función devuelve el comparador de valor actual.
El siguiente ejemplo ilustra la función pie.sortValues() en D3.js:
Ejemplo 1:
HTML
<!DOCTYPE html>
<html>
<head>
<script src="https://d3js.org/d3.v6.min.js">
</script>
</head>
<body>
<div style="width:300px;
height:300px;">
<center>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h2>
pie.sortValues()
</h2>
</center>
<svg width="300" height="250">
</svg>
<button>Click Me</button>
</div>
<script>
// Data to be added in the pie chart
var data = [
{ "property": "fp5", "value": 5 },
{ "property": "gp5", "value": 16 },
{ "property": "bp4", "value": 10 },
{ "property": "ap3", "value": 12 },
{ "property": "mp2", "value": 19 },
{ "property": "kp1", "value": 21 },
]
// Selecting SVG using d3.select()
var svg = d3.select("svg");
// Creating Pie generator
var pie = d3.pie()
// Use of pie.value() Function
.value((d) => { return d.value })
(data);
function updatePie() {
// Creating Pie generator
var pie = 0
var pie = d3.pie()
.value((d) => { return d.value })
// Use of pie.sortValues() Function
.sortValues(function (a, b) {
return a - b;
})
(data);
// Creating arc
var arc = d3.arc()
.innerRadius(0)
.outerRadius(100);
let g = svg.append("g")
.attr("transform", "translate(150,120)");
// Grouping different arcs
var arcs = g.selectAll("arc")
.data(pie)
.enter()
.append("g");
// Appending path
arcs.append("path")
.attr("fill", (data, i) => {
return d3.schemeSet2[i];
})
.attr("d", arc);
arcs.append("text")
.attr("transform", (d) => {
return "translate(" +
arc.centroid(d) + ")";
})
.text(function (d) {
return d.value;
});
}
let btn = document.querySelector("button")
btn.addEventListener("click", updatePie);
// Creating arc
var arc = d3.arc()
.innerRadius(0)
.outerRadius(100);
let g = svg.append("g")
.attr("transform", "translate(150,120)");
// Grouping different arcs
var arcs = g.selectAll("arc")
.data(pie)
.enter()
.append("g");
// Appending path
arcs.append("path")
.attr("fill", (data, i) => {
return d3.schemeSet2[i];
})
.attr("d", arc);
arcs.append("text")
.attr("transform", (d) => {
return "translate(" +
arc.centroid(d) + ")";
})
.text(function (d) {
return d.value;
});
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Ejemplo 2:
HTML
<!DOCTYPE html>
<html>
<head>
<script src="https://d3js.org/d3.v6.min.js">
</script>
</head>
<body>
<div style="width:300px;
height:300px;">
<center>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h2>
pie.sortValues();
</h2>
</center>
<svg width="300" height="250">
</svg>
<button>Clickme</button>
</div>
<script>
// Data to be added in the pie chart
var data = [
{ "property": "fp5", "value": "5" },
{ "property": "gp5", "value": "6" },
{ "property": "bp4", "value": "b" },
{ "property": "ap3", "value": "a" },
{ "property": "mp2", "value": 9 },
{ "property": "kp1", "value": "8" },
]
// Selecting SVG using d3.select()
var svg = d3.select("svg");
// Creating Pie generator
var pie = d3.pie()
// Use of pie.value() Function
.value((d) => { return d.value })
(data);
function updatePie() {
// Creating Pie generator
var pie = 0
var pie = d3.pie()
.value((d) => { return d.value })
// Use of pie.sortValues() Function
.sortValues(function (b, a) {
console.log("a: " + a + ",
b: " + b + ",
a - b: ", b - a);
return b - a;
})
(data);
// Creating arc
var arc = d3.arc()
.innerRadius(30)
.outerRadius(80);
let g = svg.append("g")
.attr("transform", "translate(150,120)");
// Grouping different arcs
var arcs = g.selectAll("arc")
.data(pie)
.enter()
.append("g");
// Appending path
arcs.append("path")
.attr("fill", (data, i) => {
return d3.schemeSet1[i];
})
.attr("d", arc);
arcs.append("text")
.attr("transform", (d) => {
return "translate(" +
arc.centroid(d) + ")";
})
.text(function (d) {
return d.value;
});
}
let btn = document.querySelector("button")
btn.addEventListener("click", updatePie);
// Creating arc
var arc = d3.arc()
.innerRadius(30)
.outerRadius(80);
let g = svg.append("g")
.attr("transform", "translate(150,120)");
// Grouping different arcs
var arcs = g.selectAll("arc")
.data(pie)
.enter()
.append("g");
// Appending path
arcs.append("path")
.attr("fill", (data, i) => {
return d3.schemeSet1[i];
})
.attr("d", arc);
arcs.append("text")
.attr("transform", (d) => {
return "translate(" +
arc.centroid(d) + ")";
})
.text(function (d) {
return d.value;
});
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
