La función de densidad. ancho de banda () se utiliza para establecer el ancho de banda de la función de estimación de densidad. Si no se especifica el ancho de banda, establece el ancho de banda predeterminado, que es igual a 20,4939. Si se especifica el ancho de banda, establece el ancho de banda del núcleo gaussiano y devuelve la estimación.
Sintaxis:
d3.contourDensity.x().y().bandwidth([bandwidth]);
Parámetros: Esta función toma un parámetro como se indica arriba y se describe a continuación.
- ancho de banda: Esta función toma un número que define el ancho de banda de la función de estimador de densidad.
Valor devuelto: esta función no devuelve nada.
A continuación se dan algunos ejemplos de la función de densidad.ancho de banda() .
Ejemplo 1:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="
width=device-width, initial-scale=1.0">
<script type="text/javascript"
src="https://d3js.org/d3.v4.min.js">
</script>
<script src="https://d3js.org/d3-contour.v1.min.js">
</script>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<script>
// append the svg object to the body.
var svg = d3.select("body")
.append("svg")
.attr("width", 500)
.attr("height", 500)
.append("g")
.attr("transform",
"translate(" + 20 + ", " + -80 + ")");
// read data
d3.csv("./data.csv", function(data) {
var y = d3.scaleLinear()
.domain([-5, 30])
.range([ 400, 100 ]);
var x = d3.scaleLinear()
.domain([0, 22])
.range([ 0, 300]);
svg.append("g")
.call(d3.axisLeft(y));
svg.append("g")
.attr("transform", "translate(0, " + 400 + ")")
.call(d3.axisBottom(x));
var density= d3.contourDensity()
.y(function(d) { return y(d.y); })
.x(function(d) { return x(d.x); })
// Use of bandwidth() Function
.bandwidth(40)
(data)
svg.selectAll("path")
.data(density)
.enter()
.append("path")
.attr("d", d3.geoPath())
.attr("fill", "none")
.attr("stroke", "green")
});
// Data for csv file
// x, y, group
// 9.45, 4.4, H
// 9.1, 4.4, H
// 9.9, 9.9, H
// 9.6, 4.5, H
// 9.1, 9.7, H
// 4.7, 9.5, H
// 7.9, 9.6, H
// 4.7, 9.7, H
// 9.45, 4.4, H
// 12.1, 9.4, H
// 7.5, 9, H
// 4.5, 4.5, H
// 9.45, 9.7, H
// 4.45, 9.6, H
// 9.5, 7.6, H
// 9, 9.45, H
// 4.7, 12, H
// 9.7, 9.7, H
// 9.6, 9, H
// 12, 9, H
// 9.45, 4.5, H
// 9.9, 4.6, H
// 12.7, 9.9, H
// 9, 12.4, H
// 9, 4.9, H
// 9.5, 9.7, H
// 9.7, 4.7, H
// 9.9, 4.5, H
// 4, 4.5, H
// 7.9, 9, H
// 9.9, 9.45, H
// 9, 4.4, H
// 4.7, 9.7, H
// 4.5, 9.9, H
</script>
</body>
</html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="
width=device-width, initial-scale=1.0">
<script type="text/javascript"
src="https://d3js.org/d3.v4.min.js">
</script>
<script src="https://d3js.org/d3-contour.v1.min.js">
</script>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<script>
// append the svg object to the body.
var svg = d3.select("body")
.append("svg")
.attr("width", 500)
.attr("height", 500)
.append("g")
.attr("transform",
"translate(" + 20 + ", " + -80 + ")");
// read data
d3.csv("./data.csv", function(data) {
var y = d3.scaleLinear()
.domain([-5, 30])
.range([ 400, 100 ]);
var x = d3.scaleLinear()
.domain([0, 22])
.range([ 0, 300]);
svg.append("g")
.call(d3.axisLeft(y));
svg.append("g")
.attr("transform", "translate(0, " + 400 + ")")
.call(d3.axisBottom(x));
var density= d3.contourDensity()
.y(function(d) { return y(d.y); })
.x(function(d) { return x(d.x); })
// Use of bandwidth() Function
.bandwidth(10)
(data)
svg.selectAll("path")
.data(density)
.enter()
.append("path")
.attr("d", d3.geoPath())
.attr("fill", "none")
.attr("stroke", "green")
});
// Data for csv file
// x, y, group
// 9.45, 4.4, H
// 9.1, 4.4, H
// 9.9, 9.9, H
// 9.6, 4.5, H
// 9.1, 9.7, H
// 4.7, 9.5, H
// 7.9, 9.6, H
// 4.7, 9.7, H
// 9.45, 4.4, H
// 12.1, 9.4, H
// 7.5, 9, H
// 4.5, 4.5, H
// 9.45, 9.7, H
// 4.45, 9.6, H
// 9.5, 7.6, H
// 9, 9.45, H
// 4.7, 12, H
// 9.7, 9.7, H
// 9.6, 9, H
// 12, 9, H
// 9.45, 4.5, H
// 9.9, 4.6, H
// 12.7, 9.9, H
// 9, 12.4, H
// 9, 4.9, H
// 9.5, 9.7, H
// 9.7, 4.7, H
// 9.9, 4.5, H
// 4, 4.5, H
// 7.9, 9, H
// 9.9, 9.45, H
// 9, 4.4, H
// 4.7, 9.7, H
// 4.5, 9.9, H
</script>
</body>
</html>
Producción:
