Family Chart

The Family Chart library is organized into three core classes that manage different aspects of the visualization lifecycle:

1. f3Chart (Chart Class): The primary entry point. It manages the overall visualization, including data orchestration, styling, tree layout, orientation, and the main update loop.
2. f3Card (CardHtml Class): A sub-component of the chart used for node rendering. It specializes in HTML-based card customization, allowing you to define how individual family members are visually represented (images, custom HTML, dimensions, and interactive behaviors).
3. f3EditTree (EditTree Class): An extension of the chart that enables data manipulation. It provides the UI and logic for adding, editing, or removing family members and relationships, including form management and undo/redo functionality.

To use them, you typically initialize the f3Chart first, then chain or call methods to configure f3Card and f3EditTree based on your requirements.

In React, use useRef to reference the container element and useEffect to initialize the chart after the component mounts. Ensure the chartRef div is returned in the JSX.

import React, { useEffect, useRef } from 'react';
import * as f3 from 'family-chart';
import 'family-chart/styles/family-chart.css';

const FamilyTree = () => {
  const chartRef = useRef(null);

  useEffect(() => {
    if (chartRef.current) {
      const data = [
        {
          "id": "1",
          "data": {"first name": "John", "last name": "Doe", "birthday": "1980", "gender": "M"},
          "rels": {"spouses": ["2"], "children": ["3"]}
        }
      ];

      const f3Chart = f3.createChart('#FamilyChart', data);

      f3Chart.setCardHtml()
        .setCardDisplay([["first name","last name"],["birthday"]]);

      f3Chart.updateTree({initial: true});
    }
  }, []);

  return <div className="f3" id="FamilyChart" ref={chartRef} style={{width: '100%', height: '900px', margin: 'auto', backgroundColor: 'rgb(33,33,33)', color: '#fff'}} />;
};

export default FamilyTree;

To create a basic interactive family tree, import the family-chart package and its CSS, define your data structure, and initialize the chart using createChart. You can then configure the card display (how information is shown on nodes) and the editing interface (how users modify data).

Data Format

Your data should be an array of objects containing:

• id: A unique identifier.
• data: An object containing person-specific attributes (e.g., first name, last name).
• rels: An object defining relationships such as spouses, children, or parents using the IDs of related members.

Implementation Steps

1. Import family-chart and the required CSS.
2. Call f3.createChart(selector, data) to initialize the visualization.
3. Use .setCardHtml() to configure node card layouts.
4. Use .editTree() to configure the editing interface.
5. Call .updateTree({initial: true}) to render the chart.

import * as f3 from 'family-chart';
import 'family-chart/dist/styles/family-chart.css';

// Your family tree data
const data = [
  {
    "id": "1",
    "data": {"first name": "John", "last name": "Doe", "birthday": "1980", "gender": "M"},
    "rels": {"spouses": ["2"], "children": ["3"]}
  },
  {
    "id": "2",
    "data": {"first name": "Jane", "last name": "Doe", "birthday": "1982", "gender": "F"},
    "rels": {"spouses": ["1"], "children": ["3"]}
  },
  {
    "id": "3",
    "data": {"first name": "Bob", "last name": "Doe", "birthday": "2005", "gender": "M"},
    "rels": {"parents": ["1", "2"]}
  }
];

// Create the chart
const f3Chart = f3.createChart('#FamilyChart', data)

const f3Card = f3Chart.setCardHtml()
  .setCardDisplay([["first name","last name"],["birthday"]]);

const f3EditTree = f3Chart.editTree()
  .setFields(["first name","last name","birthday"]);

f3Chart.updateTree({initial: true});

In Angular, import the library and CSS. Initialize the chart within the ngOnInit lifecycle hook. You can cast the data as f3.Data for type safety.

import { Component, ElementRef, OnInit } from '@angular/core';
import * as f3 from 'family-chart';
import 'family-chart/styles/family-chart.css';

@Component({
  selector: 'app-family-chart',
  standalone: true,
  template: '<div class="f3" id="FamilyChart" style="width:100%;height:900px;margin:auto;background-color:rgb(33,33,33);color:#fff;"></div
',
})
export class FamilyTreeComponent implements OnInit {
  constructor(private elementRef: ElementRef) {}

  ngOnInit() {
    const data = [
      {
        "id": "1",
        "data": {"first name": "John", "last name": "Doe", "birthday": "1980", "gender": "M"},
        "rels": {"spouses": ["2"], "children": ["3"]}
      }
    ];

    const f3Chart = f3.createChart('#FamilyChart', data as f3.Data);

    f3Chart
      .setCardHtml()
      .setCardDisplay([['first name', 'last name'], ['birthday']]);

    f3Chart.updateTree({ initial: true });
  }
}

To use Family Chart in a modern JavaScript environment, import the library and its CSS. Use f3.createChart(selector, data) to initialize the chart, then configure the card display and update the tree.

import * as f3 from 'family-chart';
import 'family-chart/dist/styles/family-chart.css';

const data = [
  {
    "id": "1",
    "data": {"first name": "John", "last name": "Doe", "birthday": "1980", "gender": "M"},
    "rels": {"spouses": ["2"], "children": ["3"]}
  },
  {
    "id": "2",
    "data": {"first name": "Jane", "last name": "Doe", "birthday": "1982", "gender": "F"},
    "rels": {"spouses": ["1"], "children": ["3"]}
  },
  {
    "id": "3",
    "data": {"first name": "Bob", "last name": "Doe", "birthday": "2005", "gender": "M"},
    "rels": {"parents": ["1", "2"]}
  }
];

const chart = f3.createChart('#FamilyChart', data);

chart.setCardHtml()
  .setCardDisplay([["first name","last name"],["birthday"]]);

chart.updateTree({initial: true});

In Svelte, use the onMount lifecycle hook to initialize the chart. Use bind:this to get a reference to the container element.

<script>
  import { onMount } from 'svelte';
  import * as f3 from 'family-chart';
  import 'family-chart/styles/family-chart.css';

  let chartContainer;

  onMount(() => {
    if (!chartContainer) return

    const data = [
      {
        "id": "1",
        "data": {"first name": "John", "last name": "Doe", "birthday": "1980", "gender": "M"},
        "rels": {"spouses": ["2"], "children": ["3"]}
      }
    ];

    const f3Chart = f3.createChart('#FamilyChart', data);

    f3Chart.setCardHtml()
      .setCardDisplay([["first name","last name"],["birthday"]]);

    f3Chart.updateTree({initial: true});
  });
</script>

<div class="f3" id="FamilyChart" bind:this={chartContainer} style="width:100%;height:900px;margin:auto;background-color:rgb(33,33,33);color:#fff;"></div