Define a fixed distance between each nodes with d3-dag

Question

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();

Answer 1

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.