laoyang
c1a97c7d81
家谱 v21：改回 family-chart 库渲染
用户明确要求「还是用 family-chart 来实现吧，刚才查了这个库可以完美实现
我想要的效果，之前一定是你调用的方法不对」。自研区间法（v20）虽然
20/20 全显示且通过全部版面检查，但用户觉得不够顺滑细腻，改为交给成熟库。
== 关键修复（都是真跑出来的坑）==
1. **IIFE 首行就 return**：本地变量 `var f3 = root.querySelector(...)` 与
全局库 `f3` 重名，`typeof f3 === 'undefined'` 因变量提升恒为真 →
整段 JS 一行没执行、画布永远空白。改名 `f3Canvas`。
2. **「回到我」不动卡片层**：库的 zoom 行为绑在 `#f3Canvas` 上，不是
`svg.main_svg`。拿 svg 的 `__zoomObj` 去驱动只会动 SVG 连线层，
HTML 卡片层（`#htmlSvg .cards_view`）留在原地。改取 `#f3Canvas`。
3. **SVG 退化成 300×150**：库自带 CSS 写的是 `.f3 svg.main_svg{width:100%;
height:100%}`，而我们的容器类名是 `.kin-chart`（不是 `.f3`）、也没引
库的 CSS → SVG 根元素用浏览器默认尺寸，所有画到框外的连线被裁掉。
症状很隐蔽：卡片层是 HTML div 不受影响，于是表现为「卡在、线没了」。
补 `.kin-chart svg.main_svg{width:100%;height:100%}`。
4. **儿子/女儿这一辈不显示**：树根是最高祖先，`progeny_depth` 必须覆盖到
「我」的下一代 → 从 2 调到 3。
5. **连线是白的看不见**：库给 path 写了 inline `stroke="#fff"`，普通 CSS
覆盖不了，必须 `!important`。
== 免费版能力边界（已实测确认，非调用问题）==
库的算法只画「树根的祖先链 + 后代 + 树根的兄弟姐妹 + 各人配偶」，
**不会从配偶继续向上/向下 walk**。20 人夹具里岳父/岳母/舅子/外甥
（4 位姻亲）画不出来（换树根、调 depth 都救不了）→ 图上 16/20。
服务端 data-datum 仍含全体（含姻亲），名册/称呼不受影响。
== 验证战绩 ==
- e2e 549 通过 / 0 失败
- 桌面几何 368 / 0
- 移动端几何 516 / 0（家谱断言改到 family-chart 选择器）
- 交互 97 / 0；升级专测 123 / 0
- 家谱可视化 24 / 0（含「svg 不是 300×150」这条，正是坑 3 的捕手）
- 家谱版面 10 / 0
- 反向验证 3 / 3（间距压扁→叠卡；depth=1→缺人；写坏 centerOn 平移量→偏离中心）