La función d3.svg.axis() en D3.js se usa para crear un nuevo eje predeterminado. Esta función construirá un nuevo eje en este eje, se pueden realizar varias operaciones.
Sintaxis:
d3.svg.axis()
Parámetros: Esta función no acepta ningún parámetro.
Valor de retorno: esta función devuelve el eje creado.
Los siguientes programas ilustran la función d3.svg.axis() en D3.js:
Ejemplo 1:
HTML
<html>
<head>
<title>
D3.js | d3.axisLeft() Function
</title>
<script src="//d3js.org/d3.v3.min.js"></script>
</head>
<body>
<script>
var svg = d3.select("body").append("svg")
.attr("width", 400)
.attr("height", 400);
// Create the Scale we will use
// for the Axis
var axisScale = d3.scale.linear()
.domain([0, 100])
.range([0, 300]);
// Create the Axis
var xAxis = d3.svg.axis()
.scale(axisScale);
// Create an SVG group Element for
// the Axis elements and call the
// xAxis function
svg.append("g")
.attr("transform", "translate(50, 50)")
.call(xAxis);
</script>
</body>
</html>
Producción:
Ejemplo 2:
HTML
<html>
<head>
<title>
D3.js | d3.axisLeft() Function
</title>
<script src="//d3js.org/d3.v3.min.js"></script>
</head>
<body>
<script>
var svg = d3.select("body").append("svg")
.attr("width", 400)
.attr("height", 400);
// Create the Scale we will use for the Axis
var axisScale = d3.scale.linear()
.domain([0, 100])
.range([300, 0]);
// Create the Axis
var xAxis = d3.svg.axis()
.scale(axisScale);
// Create an SVG group Element for the
// Axis elements and call the xAxis function
svg.append("g")
.attr("transform", "translate(50, 50)")
.call(xAxis);
</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