求助：如何在D3.js中实现可自定义圆角半径的路径圆角？

我帮你把那个Observable Notebook里的圆角路径逻辑转换成了普通JavaScript环境下可用的D3代码，还添加了用户交互来调整圆角半径，直接就能用。

核心思路 #

核心是写一个函数，遍历路径的每个顶点，计算出圆角对应的圆弧指令，替换掉原来的直角顶点。这个函数会自动处理边界情况（比如圆角半径不能超过相邻线段的一半，避免圆角溢出），同时支持闭合和非闭合路径。

完整代码示例 #

<!DOCTYPE html>
<html>
<head>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <style>
        svg { border: 1px solid #ccc; }
        .control-panel { margin: 10px 0; }
    </style>
</head>
<body>
    <div class="control-panel">
        <label>圆角半径: <input type="range" id="radiusSlider" min="0" max="50" value="10"></label>
        <span id="radiusValue">10</span>
    </div>
    <svg width="600" height="400" id="svg"></svg>

    <script>
        // 核心函数：生成带圆角的路径指令
        function roundedPath(points, radius, closed = true) {
            const path = [];
            const n = points.length;

            // 移动到路径起始点
            path.push(`M ${points[0][0]},${points[0][1]}`);

            for (let i = 0; i < n; i++) {
                const current = points[i];
                const next = points[(i + 1) % n];
                const prev = points[(i - 1 + n) % n];

                // 计算当前顶点前后线段的单位向量
                const dx1 = current[0] - prev[0];
                const dy1 = current[1] - prev[1];
                const len1 = Math.sqrt(dx1 * dx1 + dy1 * dy1);
                const nx1 = dx1 / len1;
                const ny1 = dy1 / len1;

                const dx2 = next[0] - current[0];
                const dy2 = next[1] - current[1];
                const len2 = Math.sqrt(dx2 * dx2 + dy2 * dy2);
                const nx2 = dx2 / len2;
                const ny2 = dy2 / len2;

                // 限制圆角半径，不能超过相邻线段长度的一半
                const r = Math.min(radius, len1 / 2, len2 / 2);

                // 计算圆角的两个端点（从顶点向前后线段偏移r距离）
                const p1x = current[0] - nx1 * r;
                const p1y = current[1] - ny1 * r;
                const p2x = current[0] + nx2 * r;
                const p2y = current[1] + ny2 * r;

                // 计算圆弧的方向和大小参数
                const cross = nx1 * ny2 - ny1 * nx2;
                const sweep = cross > 0 ? 1 : 0; // 圆弧的绘制方向
                const angle = Math.acos(nx1 * nx2 + ny1 * ny2);
                const largeArc = angle > Math.PI ? 1 : 0; // 是否使用大圆弧

                // 添加线段到圆角起点，再添加圆弧指令
                path.push(`L ${p1x},${p1y}`);
                path.push(`A ${r},${r} 0 ${largeArc},${sweep} ${p2x},${p2y}`);
            }

            // 如果是闭合路径，添加闭合指令
            if (closed) path.push('Z');

            return path.join(' ');
        }

        // 初始化D3 SVG容器
        const svg = d3.select('#svg');
        const width = +svg.attr('width');
        const height = +svg.attr('height');

        // 自定义你的原始路径点集
        const originalPoints = [
            [100, 100],
            [300, 100],
            [300, 200],
            [200, 300],
            [100, 200]
        ];

        // 创建路径元素
        let path = svg.append('path')
            .attr('fill', '#f0f0f0')
            .attr('stroke', '#333')
            .attr('stroke-width', 2);

        // 更新路径的函数
        function updatePath(radius) {
            const pathData = roundedPath(originalPoints, radius);
            path.attr('d', pathData);
        }

        // 初始渲染
        updatePath(10);

        // 绑定滑块交互，让用户实时调整圆角半径
        const slider = d3.select('#radiusSlider');
        const valueDisplay = d3.select('#radiusValue');

        slider.on('input', function() {
            const radius = +this.value;
            valueDisplay.text(radius);
            updatePath(radius);
        });
    </script>
</body>
</html>

关键细节说明 #

• roundedPath函数：这是核心，它接收三个参数：
  • points：路径的顶点数组，每个元素是[x, y]坐标
  • radius：圆角半径（用户可自定义）
  • closed：布尔值，控制路径是否闭合，默认true
• 边界处理：函数会自动将圆角半径限制在相邻线段长度的一半以内，避免圆角超出线段范围导致路径变形
• 交互部分：通过滑块控件，用户可以实时调整圆角半径，预览不同效果
• 适配D3生成的路径：如果你的路径是用D3的d3.line或d3.area生成的，只需要把原始数据点传入roundedPath函数即可，不需要解析路径字符串

内容的提问来源于stack exchange，提问作者Elmer Cusipuma