La función d3.scaleQuantize() en d3.js se usa para crear una nueva escala que es similar a las escalas lineales, excepto que las escalas lineales usan una escala discreta y discontinua.
Sintaxis:
d3.scaleQuantize();
Parámetros: Esta función no acepta ningún parámetro.
Valor devuelto: la función d3.scaleQuantize() devuelve una función.
Ejemplo 1:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" path1tent="width=device-width,
initial-scale=1.0" />
<title>Geeks for geeks</title>
<script src="https://d3js.org/d3.v4.min.js">
</script>
<script src="https://d3js.org/d3-color.v1.min.js">
</script>
<script src=
"https://d3js.org/d3-interpolate.v1.min.js">
</script>
<script src=
"https://d3js.org/d3-scale-chromatic.v1.min.js">
</script>
<style>
body {
line-height: 5px;
text-align: center;
}
h2 {
color: green;
}
</style>
</head>
<body>
<h2>Geeks for geeks</h2>
<p>D3.scaleQuantize() Function </p>
<script>
var object = d3.scaleQuantize()
.domain([0, 1])
.range(["less than 0.5", "greater than 0.5"]);
document.write("<br/>")
document.write("<h3>" + object(0.4) + "</h3>");
document.write("<h3>" + object(0.5) + "</h3>");
</script>
</body>
</html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" path1tent="width=device-width,
initial-scale=1.0" />
<title>Geeks for geeks</title>
<script src="https://d3js.org/d3.v4.min.js">
</script>
<script src="https://d3js.org/d3-color.v1.min.js">
</script>
<script src=
"https://d3js.org/d3-interpolate.v1.min.js">
</script>
<script src=
"https://d3js.org/d3-scale-chromatic.v1.min.js">
</script>
<style>
body {
line-height: 5px;
text-align: center;
}
h2 {
color: green;
}
</style>
</head>
<body>
<h2>Geeks for geeks</h2>
<p>D3.scaleQuantize() Function </p>
<script>
var object = d3.scaleQuantize()
// Value from 1 to 10 decides
// which value to output
.domain([1, 10])
.range(["1. This is object(1)",
"2. This is object(2)",
"3. This is object(3)",
"4. This is object(4)",
"5. This is object(5)",
"6. This is object(6)",
"7. This is object(7)",
"8. This is object(8)",
"9. This is object(9)",
"10. This is object(10)"]);
document.write("<br/>")
document.write("<h3>" + object(1) + "</h3>");
document.write("<h3>" + object(2) + "</h3>");
document.write("<h3>" + object(3) + "</h3>");
document.write("<h3>" + object(4) + "</h3>");
document.write("<h3>" + object(5) + "</h3>");
document.write("<h3>" + object(6) + "</h3>");
document.write("<h3>" + object(7) + "</h3>");
document.write("<h3>" + object(8) + "</h3>");
document.write("<h3>" + object(9) + "</h3>");
document.write("<h3>" + object(10) + "</h3>");
</script>
</body>
</html>
Producción:
