Initial commit: webtrees full diagram chart module
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
This commit is contained in:
30
resources/js/modules/index.js
Normal file
30
resources/js/modules/index.js
Normal file
@@ -0,0 +1,30 @@
|
||||
/**
|
||||
* Full Diagram — entry point.
|
||||
*
|
||||
* Reads embedded data from the page and initializes the chart.
|
||||
*/
|
||||
import Chart from "./lib/chart.js";
|
||||
|
||||
async function init() {
|
||||
const data = window.fullDiagramData;
|
||||
const baseUrl = window.fullDiagramBaseUrl;
|
||||
|
||||
if (!data || !data.persons) {
|
||||
console.error("Full Diagram: No tree data found.");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const chart = new Chart("#full-diagram-container", data, baseUrl);
|
||||
await chart.render();
|
||||
} catch (err) {
|
||||
console.error("Full Diagram: Render failed", err);
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize when DOM is ready
|
||||
if (document.readyState === "loading") {
|
||||
document.addEventListener("DOMContentLoaded", init);
|
||||
} else {
|
||||
init();
|
||||
}
|
||||
Reference in New Issue
Block a user