El método d3.scaleLinear() se usa para crear un punto de escala visual. Este método es
Sintaxis:
d3.scaleLinear();
Parámetros: Este método no toma parámetros.
Valor devuelto: este método devuelve una función de escala lineal.
Ejemplo 1: Trazado de puntos de escala.
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>Line in D3.js</title>
</head>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js">
</script>
<body>
<h1 style="text-align: center;
color: green;">
GeeksforGeeks
</h1>
<center>
<svg width="700" height="40">
<g class="scal" transform="translate(40, 30)">
</g>
</svg>
</center>
<script>
var points = [ 0, 2, 4, 6, 7.72, 9.11, 9.99 ];
var ScaleGener = d3.scaleLinear()
.domain([0, 10])
.range([0, 600]);
d3.select('svg .scal')
.selectAll('circle')
.data(points)
.enter()
.append('circle')
.attr('r', 3)
.attr('fill', "green")
.attr('cx', function(d) {
return ScaleGener(d);
});
</script>
</body>
</html>
Producción:
Ejemplo 2: Establecer texto para cada punto.
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>Line in D3.js</title>
</head>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js">
</script>
<body>
<h1 style="text-align: center;
color: green;">
GeeksforGeeks
</h1>
<center>
<svg width="700" height="40">
<g class="scal" transform="translate(40, 30)">
</g>
</svg>
</center>
<script>
var points = [ 0, 2, 4, 6, 7.72, 9.11, 9.99 ];
var ScaleGener = d3.scaleLinear()
.domain([0, 10])
.range([0, 600]);
d3.select('svg .scal')
.selectAll('circle')
.data(points)
.enter()
.append('circle')
.attr('r', 3)
.attr('fill', "green")
.attr('cx', function(d) {
return ScaleGener(d);
});
d3.select('svg .scal')
.selectAll('text')
.data(points)
.enter()
.append('text')
.attr('x', function(d) {
return ScaleGener(d);
})
.attr('y', -10)
.text(function(d) {
return d;
});
</script>
</body>
</html>
Producción:
