Hey there! Let's figure out why those links in your D3 force-directed graph aren't showing up—this is a super common gotcha, so we’ll get it fixed in no time. Below are the most likely causes and step-by-step fixes:

Common Causes & Fixes #

1. Mismatched source/target in Link Data #

D3’s forceLink requires link data to reference nodes correctly. Your links’ source and target values must be either:

• The node object itself
• The index of the node in the nodes array
• The node’s id property (if you specify an id accessor)

Example Fix:

If your JSON looks like this (using node IDs):

{
  "nodes": [{"id": "user1", "value": 10}, {"id": "user2", "value": 15}],
  "links": [{"source": "user1", "target": "user2"}]
}

You need to tell forceLink to use the node id for matching:

// Wrong: D3 will treat "user1" as an index (which doesn't exist)
simulation.force("link", d3.forceLink(links))

// Correct: Bind links to nodes using their id property
simulation.force("link", d3.forceLink(links).id(d => d.id))

2. Missing Link Element Creation #

You forgot to add <line> (or <path>) elements to your SVG and bind link data to them. This is a easy step to overlook!

Example Fix:

// Create link elements in your SVG
const links = svg.selectAll(".link")
  .data(yourLinkDataset)
  .enter()
  .append("line")
  .attr("class", "link")
  .attr("stroke", "#666") // Ensure contrast with background
  .attr("stroke-width", 2); // Make links visible

Pro tip: If you’re using SVG groups (<g>), make sure links are added to the correct group (and not hidden under nodes).

3. Link Force Not Added to Simulation #

You didn’t include the forceLink in your simulation configuration. Without this, D3 won’t calculate link positions or update them during simulation ticks.

Example Fix:

const simulation = d3.forceSimulation(yourNodeDataset)
  .force("link", d3.forceLink(yourLinkDataset).id(d => d.id)) // Critical line!
  .force("charge", d3.forceManyBody().strength(-300))
  .force("center", d3.forceCenter(width/2, height/2));

4. No Link Position Updates in Tick Event #

Even if you set up links correctly, you need to update their coordinates every time the simulation ticks. If you skip this, links will never move from their default (0,0) position.

Example Fix:

simulation.on("tick", () => {
  // Update node positions (you probably have this already)
  nodes.attr("cx", d => d.x)
       .attr("cy", d => d.y);

  // Update link positions (don't forget this!)
  links.attr("x1", d => d.source.x)
       .attr("y1", d => d.source.y)
       .attr("x2", d => d.target.x)
       .attr("y2", d => d.target.y);
});

For curved links using <path>, replace the link update code with a path generator:

links.attr("d", d => {
  const dx = d.target.x - d.source.x;
  const dy = d.target.y - d.source.y;
  const dr = Math.sqrt(dx*dx + dy*dy);
  return `M${d.source.x},${d.source.y}A${dr},${dr} 0 0,1 ${d.target.x},${d.target.y}`;
});

5. Invisible Link Styles #

Your links might exist but be impossible to see! Check these style issues:

• stroke color matches the background (e.g., white links on a white SVG)
• stroke-width is set to 0 or a tiny value
• Links are hidden under node elements

Example Fix:

Add explicit CSS for links:

.link {
  stroke: #999; /* High contrast with background */
  stroke-width: 2px; /* Thick enough to spot */
}

Quick Troubleshooting Checklist #

1. Open your browser’s DevTools → Inspect the SVG to see if <line>/<path> elements exist for links. If not, fix the element creation step.
2. If links exist, check their x1/y1/x2/y2 attributes—if they’re NaN, your source/target matching is broken.
3. Verify link styles in DevTools to rule out visibility issues.

内容的提问来源于stack exchange，提问作者Bashir