Los ejes se pueden dibujar usando las funciones D3 integradas. Esto está hecho de Líneas, Marcas y Etiquetas. La función d3.axisBottom() en D3.js se usa para crear un eje horizontal inferior. Esta función construirá un nuevo generador de eje orientado hacia abajo para la escala dada, con argumentos de marca vacíos, un tamaño de marca de 6 y un relleno de 3.
La API de Axis se puede configurar mediante el siguiente script.
<script src = "https://d3js.org/d3-axis.v1.min.js"></script>
Sintaxis:
d3.axisBottom(scale)
Parámetros: esta función acepta solo un parámetro como se mencionó anteriormente y se describe a continuación:
- escala: Este parámetro contiene la escala utilizada.
Valor de retorno: esta función devuelve el eje horizontal inferior creado.
Los siguientes programas ilustran la función d3.axisBottom() en D3.js:
Ejemplo 1:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
D3.js | d3.axisBottom() Function
</title>
<script type="text/javascript"
src="https://d3js.org/d3.v4.min.js">
</script>
</head>
<body>
<script>
var width = 400, height = 400;
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
var xscale = d3.scaleLinear()
.domain([0, 100])
.range([0, width - 50]);
var x_axis = d3.axisBottom(xscale);
svg.append("g")
.attr("transform", "translate(20,100)")
.call(x_axis)
</script>
</body>
</html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
D3.js | d3.axisBottom() Function
</title>
<script type="text/javascript"
src="https://d3js.org/d3.v4.min.js">
</script>
<style>
svg text {
fill: green;
font: 15px sans-serif;
text-anchor: center;
}
</style>
</head>
<body>
<script>
var width = 400, height = 400;
var data = [10, 12, 14, 16, 18, 20];
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
var xscale = d3.scaleLinear()
.domain([d3.min(data), d3.max(data)])
.range([0, width - 60]);
var x_axis = d3.axisBottom(xscale);
var xAxisTranslate = height / 2;
svg.append("g")
.attr("transform", "translate(50, "
+ xAxisTranslate + ")")
.call(x_axis)
</script>
</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