使用 d3 计算有向图中弯曲路径链接的控制点

Question

我在 d3 中有一个力定向图。

我正在尝试使用路径元素在两个圆形节点之间创建链接，以便创建弯曲链接。

路径应该是这样的：

此外，拖动节点时，路径变宽或变窄时应保持相同的结构。

例如

我有正确的 x/y 坐标，但我正在努力寻找该曲线的正确控制点。

这是一个小提琴： https://jsfiddle.net/2Lfvcpdr/5/

const controlPoint1X = sourceX + (targetX - sourceX) / 2;
                    const controlPoint1Y = sourceY + 20;
                    const controlPoint2X = targetX - (targetX - sourceX) / 2;
                    const controlPoint2Y = targetY - 60;

                    // Create the curve
                    return curve([
                        [sourceX, sourceY],
                        [controlPoint1X, controlPoint1Y],
                        [controlPoint2X, controlPoint2Y],
                        [targetX, targetY]
                    ]);

Answer 1

我已经完成了这个小程序..你可以玩控制点。

<!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.v7.min.js"></script>
</head>
<body>

<svg width="400" height="300"></svg>

<script>
    var svg = d3.select("svg");
    var points = [
        { x: 100, y: 150 },
        { x: 200, y: 50 },
        { x: 300, y: 150 }
    ];

    // Draw the control points
    var controlPoints = svg.selectAll("circle.points")
        .data(points)
        .enter()
        .append("circle")
        .attr("class", "points")
        .attr("cx", function(d) { return d.x; })
        .attr("cy", function(d) { return d.y; })
        .attr("r", 5)
        .call(d3.drag().on("drag", dragHandler));

    // Draw the quadratic Bezier curve
    var curve = svg.append("path")
        .data([points])
        .attr("d", d3.line()
            .x(function(d) { return d.x; })
            .y(function(d) { return d.y; })
            .curve(d3.curveBasis))
        .attr("fill", "none")
        .attr("stroke", "blue")
        .attr("stroke-width", 2);

    function dragHandler(event, d) {
        d3.select(this)
            .attr("cx", d.x = event.x)
            .attr("cy", d.y = event.y);

        // Update the curve path on drag
        curve.attr("d", d3.line()
            .x(function(d) { return d.x; })
            .y(function(d) { return d.y; })
            .curve(d3.curveBasis));
    }

</script>

</body>
</html>

使用 d3 计算有向图中弯曲路径链接的控制点

问题描述投票：0回答：1

1个回答

最新问题

使用 d3 计算有向图中弯曲路径链接的控制点

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1