added

src/app/models/familytreenode.ts

 import { Family } from "./family";
+import { Kakocho } from "./kakocho";
 
 export interface FamilyTreeNode {
   family: Family;
 
-  spouses: FamilyTreeNode[];
+  kakocho?: Kakocho;   // ★追加（ここが核心）
 
-  children: FamilyTreeNode[];
+  isDeceased: boolean; // ★追加
 
+  spouses: FamilyTreeNode[];
+  children: FamilyTreeNode[];
   parents: FamilyTreeNode[];
 }

src/app/pages/danka-detail/danka-detail.ts

 
   @ViewChild('familyTreeSvg')
   familyTreeSvg?: ElementRef<SVGSVGElement>;
+  @ViewChild('familyTreeSvg')
+  set svg(el: ElementRef<SVGSVGElement> | undefined) {
+    if (!el) return;
+
+    this.familyTreeSvg = el;
+    this.initializePanZoom();
+  }
   private panZoomInstance: any;
 
   readonly PERSON_WIDTH = 90;
     this.treeNodes =
       this.familyTreeBuilder.build(
         this.families,
-        this.marriageRelations
+        this.marriageRelations,
+        this.kakocholist
       );
 
     const units =

src/app/services/family-tree-builder.ts

 import { Injectable } from '@angular/core';
-
 import { Family } from '../models/family';
 import { MarriageRelation } from '../models/marriage-relation';
+import { Kakocho } from '../models/kakocho';
 import { FamilyUnit } from '../models/family-unit';
 import { FamilyUnitNode } from '../models/family-unit-node';
 
+
 export interface FamilyTreeNode {
   family: Family;
-
-  parents: FamilyTreeNode[];
-
-  children: FamilyTreeNode[];
+  kakocho?: Kakocho;
+  isDeceased: boolean;
 
   spouses: FamilyTreeNode[];
+  children: FamilyTreeNode[];
+  parents: FamilyTreeNode[];
 }
 
 @Injectable({
   build(
     families: Family[],
     marriages: MarriageRelation[],
+    kakocholist: Kakocho[]
   ): FamilyTreeNode[] {
 
     const nodeMap = new Map<string, FamilyTreeNode>();
 
-    //
-    // ノード生成
-    //
+    const kakochoMap = new Map(
+      kakocholist.map(k => [k.familyId, k])
+    );
+
+    // -----------------------------
+    // ① ノード生成（ここで統合）
+    // -----------------------------
     families.forEach((family) => {
 
+      const kakocho = kakochoMap.get(family.id);
+
       nodeMap.set(family.id, {
         family,
+        kakocho,
+        isDeceased: !!kakocho,
+
         parents: [],
         children: [],
         spouses: [],
 
     });
 
-    //
-    // 親子関係生成
-    //
+    // -----------------------------
+    // ② 親子関係
+    // -----------------------------
     families.forEach((family) => {
 
       const childNode = nodeMap.get(family.id);
+      if (!childNode) return;
 
-      if (!childNode) {
-        return;
-      }
-
-      //
-      // 父
-      //
       if (family.fatherId) {
-
-        const fatherNode =
-          nodeMap.get(family.fatherId);
-
-        if (fatherNode) {
-
-          fatherNode.children.push(childNode);
-
-          childNode.parents.push(fatherNode);
+        const father = nodeMap.get(family.fatherId);
+        if (father) {
+          father.children.push(childNode);
+          childNode.parents.push(father);
         }
       }
 
-      //
-      // 母
-      //
       if (family.motherId) {
-
-        const motherNode =
-          nodeMap.get(family.motherId);
-
-        if (motherNode) {
-
-          motherNode.children.push(childNode);
-
-          childNode.parents.push(motherNode);
+        const mother = nodeMap.get(family.motherId);
+        if (mother) {
+          mother.children.push(childNode);
+          childNode.parents.push(mother);
         }
       }
 
     });
 
-    //
-    // 配偶者関係
-    //
+    // -----------------------------
+    // ③ 配偶者関係（current）
+    // -----------------------------
     marriages
-      .filter(
-        (m) =>
-          m.status === 'current',
-      )
-      .forEach((marriage) => {
-
-        const person1 =
-          nodeMap.get(
-            marriage.person1Id,
-          );
-
-        const person2 =
-          nodeMap.get(
-            marriage.person2Id,
-          );
-
-        if (!person1 || !person2) {
-          return;
-        }
-
-        const id1 =
-          Number(person1.family.id);
+      .filter(m => m.status === 'current')
+      .forEach((m) => {
 
-        const id2 =
-          Number(person2.family.id);
+        const p1 = nodeMap.get(m.person1Id);
+        const p2 = nodeMap.get(m.person2Id);
 
-        const owner =
-          id1 < id2
-            ? person1
-            : person2;
+        if (!p1 || !p2) return;
 
-        const spouse =
-          id1 < id2
-            ? person2
-            : person1;
-
-        if (
-          !owner.spouses.some(
-            (s) =>
-              s.family.id ===
-              spouse.family.id,
-          )
-        ) {
-          owner.spouses.push(
-            spouse,
-          );
+        if (!p1.spouses.some(s => s.family.id === p2.family.id)) {
+          p1.spouses.push(p2);
         }
-      });
-
-    //
-    // spouseId フォールバック
-    //
-    families.forEach((family) => {
 
-      if (!family.spouseId) {
-        return;
-      }
+      });
 
-      const person =
-        nodeMap.get(family.id);
+    // -----------------------------
+    // ④ spouseIdフォールバック
+    // -----------------------------
+    families.forEach((f) => {
 
-      const spouse =
-        nodeMap.get(family.spouseId);
+      if (!f.spouseId) return;
 
-      if (!person || !spouse) {
-        return;
-      }
+      const a = nodeMap.get(f.id);
+      const b = nodeMap.get(f.spouseId);
 
-      if (
-        !person.spouses.some(
-          (s) =>
-            s.family.id ===
-            spouse.family.id
-        )
-      ) {
+      if (!a || !b) return;
 
-        person.spouses.push(
-          spouse
-        );
+      if (!a.spouses.some(s => s.family.id === b.family.id)) {
+        a.spouses.push(b);
       }
 
     });
     return [...nodeMap.values()];
   }
 
-  /**
-   * 家系図の起点になる人物
-   * (親が登録されていない人物)
-   */
-  getRoots(
-    nodes: FamilyTreeNode[]
-  ): FamilyTreeNode[] {
+  // -----------------------------
+  // Roots
+  // -----------------------------
+  getRoots(nodes: FamilyTreeNode[]): FamilyTreeNode[] {
 
     return nodes.filter(node => {
 
-      if (
-        node.parents.length > 0
-      ) {
-        return false;
-      }
-
-      // 配偶者がいて
-      if (
-        node.spouses.length > 0
-      ) {
+      if (node.parents.length > 0) return false;
 
-        const spouseId =
-          node.spouses[0].family.id;
-
-        // IDが若い方だけRoot
-        return (
-          node.family.id <
-          spouseId
-        );
+      if (node.spouses.length > 0) {
+        const spouseId = node.spouses[0].family.id;
+        return node.family.id < spouseId;
       }
 
       return true;
-
     });
-
-  }
-
-  /**
-   * ID検索
-   */
-  getNodeById(
-    nodes: FamilyTreeNode[],
-    id: string,
-  ): FamilyTreeNode | undefined {
-
-    return nodes.find(
-      (node) =>
-        node.family.id === id,
-    );
   }
 
   buildFamilyUnits(
 
     for (const node of nodes) {
 
-      //
-      // 夫婦あり
-      //
       if (node.spouses.length > 0) {
 
         const spouse =
 
         processed.add(key);
 
-        //
-        // この夫婦の子供を取得
-        //
         const children =
           nodes
             .filter(child => {
 
       } else {
 
-        //
-        // 独身者
-        //
         units.push({
 
           id:
     const nodeMap =
       new Map<string, FamilyUnitNode>();
 
-    //
-    // ノード生成
-    //
     units.forEach(unit => {
 
       nodeMap.set(unit.id, {
 
     });
 
-    //
-    // 親子リンク
-    //
     units.forEach(parentUnit => {
 
       parentUnit.children.forEach(child => {
     );
 
   }
-
 }