D3.js se usa principalmente para hacer gráficos y visualizar datos en los elementos HTML SVG. D3.js tiene muchas funciones, una de las cuales es la función arc() . La función Path.arc() se usa para hacer un arco, un círculo y otras formas . D3 significa Documentos controlados por datos y se utiliza principalmente para la visualización de datos.
Sintaxis:
path.arc(x, y, radius, startAngle, endAngle[anticlockwise])
Parámetros: Esta función acepta cinco parámetros como se mencionó anteriormente y se describe a continuación:
- x : este parámetro contiene la posición x del arco en el SVG.
- y : este parámetro mantiene la posición y del arco en el SVG.
- radio : Este parámetro contiene el radio del cual se va a hacer el arco.
- startAngle : este parámetro contiene el ángulo de inicio del arco.
- endAngle[anti-horario] : este parámetro contiene el ángulo en el que se debe hacer el arco, si antihorario es verdadero, el arco se dibuja en el sentido contrario a las agujas del reloj.
Nota: Si el punto actual no es igual al punto inicial del arco, se dibuja una línea recta desde el punto actual hasta el inicio del arco.
El siguiente ejemplo ilustra el D3.js | Función Path.arc() en D3.js:
Ejemplo 1:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
path1tent="width=device-width,
initial-scale=1.0">
<title>D3.js| Path.arc() Function</title>
</head>
<style>
body {
text-align: center;
}
h1 {
color: green;
}
svg{
background-color: green;
}
.path1{
fill: aliceblue;
}
</style>
<body>
<h1>GeeksforGeeks</h1>
<b>D3.js | Path.arc() Function</b>
<div>
<svg width="300" height="300">
<text x="50" y="50" font-family="Verdana"
font-size="22" fill="white">
SVG Element
</text>
<path class="path1">
</svg>
</div>
<script src =
"https://d3js.org/d3.v4.min.js">
</script>
<script>
// Creating path object
var path1= d3.path();
// Creating arc of radius 100
path1.arc(150,150,100,0,3.14)
d3.select(".path1").attr("d",path1);
</script>
</body>
</html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
path1tent="width=device-width,
initial-scale=1.0">
<title>D3.js| Path.arc() Function</title>
</head>
<style>
body {
text-align: center;
}
h1 {
color: green;
}
svg{
background-color: green;
}
.path1{
fill: aliceblue;
}
</style>
<body>
<h1>GeeksforGeeks</h1>
<b>D3.js | Path.arc() Function</b>
<div>
<svg width="300" height="300">
<text x="40" y="40" font-family="Verdana"
font-size="22" fill="white">
SVG Element
</text>
<path class="path1">
</svg>
</div>
<script src =
"https://d3js.org/d3.v4.min.js">
</script>
<script>
// Creating path object
var path1= d3.path();
// Creating arc of radius 100
path1.arc(150,150,100,0,2*3.14)
d3.select(".path1").attr("d",path1);
</script>
</body>
</html>
Producción:
