You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Balkan FamilyTree JS层级问题:如何为顶层国王添加关联配偶

解决Balkan FamilyTree JS添加多顶层配偶的问题

要给国王添加第二位顶层配偶并建立关联,你需要修正节点的pids配置,具体操作如下:

  1. 修正根节点配置
    国王作为家族顶层根节点,pids必须设为空数组[],不能指向自身ID(这会导致循环引用,无法正确生成关联):

    {
      id: 1,
      pids: [],
      name: "King George VI",
      title: "01.01.1900 - 01.01.2020",
      img: "https://cdn.balkan.app/shared/f1.png",
      gender: 'male'
    }
    
  2. 关联两位配偶
    两位王后的pids都设置为国王的ID([1]),同时指定gender: 'female',组件会自动识别同根节点的异性节点为配偶,显示在同一层级并建立关联:

    {
      id: 2,
      pids: [1],
      name: "Queen Elizabeth",
      title: "The Queen Mother",
      img: "https://cdn.balkan.app/shared/f2.png",
      gender: 'female'
    },
    {
      id: 3,
      pids: [1],
      name: "Queen Victoria",
      title: "The Queen Mother",
      img: "https://cdn.balkan.app/shared/f2.png",
      gender: 'female'
    }
    
  3. 可选:调整配偶间距
    如果两位配偶显示过于拥挤,可以在初始化Tree时添加spouseSpacing参数调整间距:

    new FamilyTree(document.getElementById("tree"), {
      nodeBinding: {
        field_0: "name",
        field_1: "title",
        img_0: "img"
      },
      spouseSpacing: 30 // 自定义配偶节点之间的间距
    });
    

之前你尝试的两种方式错误原因:

  • 第一种:如果国王的pids是指向自身的[1]而非空数组,配偶节点的pids: [1]无法正确识别为配偶关系。
  • 第二种:三个节点的pids都指向自身ID,会生成三个独立的根节点,自然不会有任何关联。

内容的提问来源于stack exchange,提问作者Cove

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.18 11:33:16