d3.js arc.padRadius()用法及代碼示例

d3.padRadius()函數用於設置圓弧中的焊盤半徑。如果提供了焊盤半徑，則它將焊盤半徑設置為指定的函數或數字並返回此弧生成器。

如果沒有提供半徑，則返回當前的焊盤半徑訪問器，默認為空，表示焊盤半徑自動計算為 sqrt(innerRadius * innerRadius + outerRadius * outerRadius)。焊盤半徑計算分隔相鄰圓弧的固定線性距離，定義為 padRadius * padAngle。

用法:

arc.padRadius([radius])

參數：此方法接受如上所述和以下描述的單個參數：

radius:焊盤半徑的值。

返回：它返回具有指定焊盤半徑的弧。

範例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>

輸出：

範例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>

輸出：

相關用法

注：本文由純淨天空篩選整理自jana_sayantan大神的英文原創作品 D3.js arc.padRadius() Function。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。