用D3-DAG定义每个节点之间的固定距离

发布于 2025-01-29 15:11:13 字数 789 浏览 2 评论 0原文

我正在使用D3-DAG创建节点和边缘。

我正在使用curvestepbebe，作为节点连接的方式。

我正在寻找一种定义每个节点之间固定宽度的方法。

这是一个小提琴：

function drawEdges(svgSelection, dag) {
    // How to draw edges
  const curve = d3.curveStepBefore;
  const line = d3
    .line()
    .curve(curve)
    .x((d) => d.x)
    .y((d) => d.y);

    svgSelection
        .append("g")
        .selectAll("path")
        .data(dag.links())
        .enter()
        .append("path")
        .attr("d", ({ points }) => line(points))
        .attr("fill", "none")
        .attr("marker-end", "url(#arrowEnd)")
        .attr("stroke-width", 3)
        .attr("stroke", "#4F97FF");
}

createGraph();

原文

I'm using d3-dag to create nodes and edges.

I'm using curveStepBefore as the way the nodes are connected.

I'm looking for a way to define a fixed width between each node.

Here's a fiddle:

fiddle

function drawEdges(svgSelection, dag) {
    // How to draw edges
  const curve = d3.curveStepBefore;
  const line = d3
    .line()
    .curve(curve)
    .x((d) => d.x)
    .y((d) => d.y);

    svgSelection
        .append("g")
        .selectAll("path")
        .data(dag.links())
        .enter()
        .append("path")
        .attr("d", ({ points }) => line(points))
        .attr("fill", "none")
        .attr("marker-end", "url(#arrowEnd)")
        .attr("stroke-width", 3)
        .attr("stroke", "#4F97FF");
}

createGraph();

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

挽心 2025-02-05 15:11:13

好的 - 我再看一下代码，发现答案

const layout = d3dag
        .sugiyama() // base layout
        .decross(d3dag.decrossOpt()) // minimize number of crossings
        .nodeSize((node) => [100, 100]);

nodesize 定义了节点的宽度和高度，并相应地调整了所有其他边缘。

Ok - I took another look at the code and found the answer

const layout = d3dag
        .sugiyama() // base layout
        .decross(d3dag.decrossOpt()) // minimize number of crossings
        .nodeSize((node) => [100, 100]);

The nodeSize defines the width and height of the node and adjusts all the other edges accordingly.

回复收藏 0 原文

~没有更多了~