graph.html renders into legend icon, not #graph-svg — d3.select("svg") selects wrong element (tiny graph, top-left)

[skokaina]

Summary

The generated graph.html (from code-review-graph visualize / build) renders the entire force graph into the legend's tiny "File" icon instead of the main #graph-svg canvas. You get a microscopic scatter crammed into the top-left legend swatch while the full-screen canvas stays empty.

Environment

• code-review-graph 2.3.5
• graph.html opened via file:// (Chrome)
• Repo graph: ~233 nodes / ~312 edges (happens on any non-trivial repo)

Root cause

In code_review_graph/visualization.py the embedded HTML template does:

var svg = d3.select("svg").attr("viewBox", [0, 0, W, H]);

d3.select("svg") returns the first <svg> in document order. The legend <nav> is emitted before #graph-svg, and its first child is the File-kind icon:

<svg width="16" height="16" viewBox="-8 -8 16 16" aria-hidden="true"><circle r="6" fill="#58a6ff"/></svg>

So gRoot + all nodes/links get appended into that 16px icon (viewBox -8 -8 16 16), producing a tiny graph inside the legend and an empty #graph-svg. The hosted demo works because it isn't competing with inline legend SVGs.

There are two affected template copies — both var svg = d3.select("svg") occurrences.

Fix

Target the dedicated element by id (it already has id="graph-svg"):

var svg = d3.select("#graph-svg").attr("viewBox", [0, 0, W, H]);

Everything downstream (gRoot, zoom, fitGraph on simulation.on("end")) chains off this one selector, so the single change fixes the whole render.

Repro

1. Build a graph for any repo with a few hundred nodes.
2. code-review-graph visualize → open .code-review-graph/graph.html.
3. Graph appears tiny inside the top-left "File" legend item; main canvas empty.