La función d3.padRadius() se usa para establecer el radio de la almohadilla en el arco. Si se proporciona el radio de la plataforma, establece el radio de la plataforma en la función o el número especificado y devuelve este generador de arco.
Si no se proporciona el radio, devuelve el descriptor de acceso del radio de la almohadilla actual, que por defecto es nulo, que indica que el radio de la almohadilla se calcula automáticamente como sqrt (innerRadius * innerRadius + outsideRadius * outsideRadius). El radio de plataforma calcula la distancia lineal fija que separa los arcos adyacentes, definida como padRadius * padAngle.
Sintaxis:
arc.padRadius([radius])
Parámetros: este método acepta un solo parámetro como se mencionó anteriormente y se describe a continuación:
- radio : El valor del radio del pad.
Return : Devuelve un arco con un radio de pad especificado.
Ejemplo 1:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width,
initial-scale=1.0"/>
<script src=
"https://d3js.org/d3.v6.min.js">
</script>
</head>
<body>
<div style="width:300px; height:300px;">
<center>
<h2 style="color:black">
d3.arcpad()
</h2>
</center>
<svg width="200" height="200">
</svg>
</div>
<script>
var svg = d3.select("svg")
.append("g")
.attr("transform", "translate(150,50)");
// padding radius =10
var arcpad = d3.arc()
.innerRadius(48)
.outerRadius(50)
.padRadius(10)
.startAngle(90)
.endAngle(2 * 180);
svg.append("path")
.attr("class", "arc")
.attr("d", arcpad)
.attr("fill","red");
</script>
</body>
</html>
Producción :
Ejemplo 2:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width,
initial-scale=1.0"/>
<script src=
"https://d3js.org/d3.v6.min.js">
</script>
</head>
<body>
<div style="width:300px; height:300px;">
<center>
<h2 style="color:black">
d3.arcpad()
</h2>
</center>
<svg width="200" height="200">
</svg>
</div>
<script>
var svg = d3.select("svg")
.append("g")
.attr("transform", "translate(150,50)");
// padding radius =5
var arcpad = d3.arc()
.innerRadius(48)
.outerRadius(50)
.padRadius(5)
.startAngle(10)
.endAngle(5);
svg.append("path")
.attr("class", "arc")
.attr("d", arcpad)
.attr("fill","red");
</script>
</body>
</html>
Producción :
Publicación traducida automáticamente
Artículo escrito por jana_sayantan y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA