What's an idiomatic way to add labels to edges?

[Hamir Mahal]

Discussed in #3751

^{Originally posted by hamirmahal August 10, 2023}
This is what I have currently.

  const nodeLabels = svg
    .selectAll('text')
    .data(mutableNodesForD3)
    .enter()
    .append('text')
    .attr('text-anchor', 'middle')
    .attr('dy', '.35em')
    .attr('font-size', '16px')
    // Clicking on a node should let users interact with the node,
    // instead of having them highlight the text label.
    .style('pointer-events', 'none')
    .text((d) => nodes[d.index!]);

  // Function to update node positions
  function ticked() {
    links
      .attr('x1', (d: any) => d.source.x)
      .attr('y1', (d: any) => d.source.y)
      .attr('x2', (d: any) => d.target.x)
      .attr('y2', (d: any) => d.target.y);

    // Without this line, nodes don't have labels.
    nodeLabels.attr('x', (d) => d.x!).attr('y', (d) => d.y!);

    // Without this line, nodes don't have a colored circle.
    nodesSelection.attr('cx', (d) => d.x!).attr('cy', (d) => d.y!);
  }

It'd be nice if the edge from 0 to 3 could display the weight of that edge, but I'm not sure how to do that after looking through the documentation.

[Mike Bostock]

Duplicate of #3751.