Files

Alexander Bocken 273e398431 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

2026-03-14 18:52:17 +01:00

1.9 KiB

Raw Blame History

Full Diagram - webtrees Chart Module

Project Overview

webtrees 2.2 chart module that visualizes the entire family tree (ancestors, descendants, siblings) in a single interactive SVG diagram. Inspired by MyHeritage "Family View".

Tech Stack

PHP 8.2+ — webtrees 2.2 module (extends AbstractModule, implements ModuleChartInterface + ModuleCustomInterface)
Namespace: FullDiagram\
D3.js v7 (cherry-picked: d3-hierarchy, d3-selection, d3-zoom, d3-shape, d3-transition) — SVG rendering
Rollup — JS bundling
Docker Compose — local dev (webtrees + MariaDB)

Key Conventions

PSR-4 autoloading: FullDiagram\ → src/
Views in resources/views/modules/full-diagram/
JS source in resources/js/modules/, built to resources/js/full-diagram.min.js
CSS in resources/css/full-diagram.css
Route pattern: /tree/{tree}/full-diagram/{xref}

Development

# Start dev environment
cd docker && docker compose up -d

# JS development
npm install && npm run watch

# Build for release
npm run prepare

Architecture

module.php — entry point, autoloads namespace, returns Module instance
src/Module.php — route registration, request handling, view rendering
src/Configuration.php — generation limits, display toggles
src/Facade/DataFacade.php — bidirectional tree traversal (ancestors + descendants + siblings)
src/Model/NodeData.php — person data (JsonSerializable)
src/Model/FamilyNode.php — family unit: couple + children
JS uses dual d3.tree() layout: ancestors upward, descendants downward, stitched at root

Important Notes

webtrees uses view() helper for templates with :: namespace syntax
Route registration uses Registry::routeFactory() in boot()
Access control via Auth::checkComponentAccess()
Individual data accessed via $individual->facts(), childFamilies(), spouseFamilies()

1.9 KiB Raw Blame History