Los ejes se pueden dibujar usando las funciones D3 integradas. Esto está hecho de Líneas, Marcas y Etiquetas. La función d3.axisTop() en D3.js se usa para crear un eje horizontal superior. Esta función construirá un nuevo generador de eje orientado hacia arriba 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.axisTop(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 es la escala utilizada.
Valor de retorno: esta función devuelve un eje horizontal superior.
Los siguientes programas ilustran la función d3.axisTop() en D3.js:
Ejemplo 1:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
D3.js | d3.axisTop() 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.axisTop(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.axisTop() 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: end;
}
</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.axisTop(xscale);
var xAxisTranslate = height / 2;
svg.append("g")
.attr("transform", "translate(50, "
+ xAxisTranslate + ")")
.call(x_axis)
</script>
</body>
</html>
Producción:
Referencia: https://devdocs.io/d3~5/d3-axis#axisTop
Publicación traducida automáticamente
Artículo escrito por SHUBHAMSINGH10 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA