d3-dag.js

async function drawDag() {
  // Use computed layout and get size
  const { width, height } = layout(dag);

  // This code only handles rendering
  const svgNode = svg`<svg width=${width} height=${height}></svg>`

  const svgSelection = d3.select(svgNode);
  const defs = svgSelection.append('defs'); // For gradients

  const steps = dag.size();
  const interp = d3.interpolateRainbow;
  const colorMap = {};
  for (const [i, node] of dag.idescendants().entries()) {
    colorMap[node.data.id] = interp(i / steps);
  }

  // How to draw edges
  const line = d3.line()
    .curve(d3.curveCatmullRom)
    .x(d => d.x)
    .y(d => d.y);

  // Plot edges
  svgSelection.append('g')
    .selectAll('path')
    .data(dag.links())
    .enter()
    .append('path')
    .attr('d', ({ points }) => line(points))
    .attr('fill', 'none')
    .attr('stroke-width', 3)
    .attr('stroke', ({source, target}) => {
      // encodeURIComponents for spaces, hope id doesn't have a `--` in it
      const gradId = encodeURIComponent(`${source.data.id}--${target.data.id}`);
      const grad = defs.append('linearGradient')
        .attr('id', gradId)
        .attr('gradientUnits', 'userSpaceOnUse')
        .attr('x1', source.x)
        .attr('x2', target.x)
        .attr('y1', source.y)
        .attr('y2', target.y);
      grad.append('stop').attr('offset', '0%').attr('stop-color', colorMap[source.data.id]);
      grad.append('stop').attr('offset', '100%').attr('stop-color', colorMap[target.data.id]);
      return `url(#${gradId})`;
    });

  // Select nodes
  const nodes = svgSelection.append('g')
    .selectAll('g')
    .data(dag.descendants())
    .enter()
    .append('g')
    .attr('transform', ({x, y}) => `translate(${x}, ${y})`);

  // Plot node circles
  nodes.append('circle')
    .attr('r', nodeRadius)
    .attr('fill', n => colorMap[n.data.id]);

  // Add text to nodes
  nodes.append('text')
    .text(d => d.data.id)
    .attr('font-weight', 'bold')
    .attr('font-family', 'sans-serif')
    .attr('text-anchor', 'middle')
    .attr('alignment-baseline', 'middle')
    .attr('fill', 'white');

  yield svgNode;
}

drawDag()