Alexander Bocken
273e398431
Interactive SVG family tree visualization using ELK (Sugiyama) for layout and D3 for rendering. Shows ancestors, descendants, and siblings in a single diagram with orthogonal bus-line connectors. Features: - Bidirectional tree traversal (ancestors + descendants + siblings) - Generation-aligned layout with post-processing Y-snap - Person cards with photos, names, dates, and hover bio cards - "More ancestors" indicator for persons with hidden parents - Pan/zoom navigation - Docker dev environment
32 lines
1.1 KiB
JavaScript
32 lines
1.1 KiB
JavaScript
/**
|
|
* Ancestor tree rendering — draws ancestor nodes and links upward from root.
|
|
*/
|
|
import { renderPersonCard } from "../chart/box.js";
|
|
import { drawElbowLink } from "./link-drawer.js";
|
|
|
|
/**
|
|
* Render the ancestor tree nodes and links.
|
|
*
|
|
* @param {d3.Selection} canvas - The SVG canvas group
|
|
* @param {Array} nodes - Ancestor hierarchy nodes (from computeLayout)
|
|
* @param {Array} links - Ancestor hierarchy links
|
|
* @param {Configuration} config
|
|
* @param {Function} onNodeClick
|
|
* @param {string} containerSelector
|
|
*/
|
|
export function renderAncestorTree(canvas, nodes, links, config, onNodeClick, containerSelector) {
|
|
// Draw links first (behind nodes)
|
|
const linkGroup = canvas.append("g").attr("class", "ancestor-links");
|
|
|
|
for (const link of links) {
|
|
drawElbowLink(linkGroup, link.source, link.target, "ancestor-link", config);
|
|
}
|
|
|
|
// Draw nodes
|
|
const nodeGroup = canvas.append("g").attr("class", "ancestor-nodes");
|
|
|
|
for (const node of nodes) {
|
|
renderPersonCard(nodeGroup, node, config, onNodeClick, containerSelector);
|
|
}
|
|
}
|