javascript - D3 : Links between spouses in a family tree

标签 javascript svg d3.js tree

这是代码的链接:http://jsfiddle.net/mj58659094/ADXGu/ ;

现在家谱只有亲子之间的联系。我怎样才能获得配偶之间的链接,如下所示?

                                        |-----------------------|       
                                  - - - | Father-3 (SMJ)        |       
                               -        |                       |-      
                             -          |-----------------------|  -    
|-----------------------|  -                                        -   
| Father-0 (PMI)        |-              |-----------------------|    -  
|                       |-              | Mother-3 (AJ)         |  -  - 
|-----------------------|  -            | (AJ Nickname)         |-    - 
                            -           |-----------------------|    -  
|-----------------------|   -                                       -   
| Mother-0 (MP)         |  -            |-----------------------|  -    
| (AJ Nickname)         |-              | Mother-3 (MTJ)        | -     
|-----------------------|               | (MTJNickname)         |-      
                                        |-----------------------|       

personId: "1000101"Father-3 (SMJ) 结过两次婚,第一任妻子是 personId: "1000102"Mother-3 (AJ),第二任妻子是 personId: "1000103"Mother-3 (MTJ)。任何帮助将不胜感激。谢谢。

最佳答案

您可以将配偶定位为父亲的 child (D3 不关心这一点),但由于您仅将 child 与父亲联系起来,因此配偶将出现在与 child 相同的级别:

Father 0 ---- Spouse 0-0
         ---- Spouse 0-1
         ---- Spouse 0-2
         ---- Father 1 ---- Spouse 1-0
                       ---- Father 2

另一种解决方案可能是将 child 与配偶联系起来:

Father 0 ---- Spouse 0-0 ---- Father 1 ---- Spouse 1-0 ---- Father 2
         ---- Spouse 0-1
         ---- Spouse 0-2

我怀疑您需要一个不同的布局(例如 force layout)来表示 child 有两个 parent :

Spouse 0-2
   |
   |
Father 0 ---- Spouse 0-0 
   |    \         /    
   |      Father 1 ------ Father 2
   |          \           /
Spouse 0-1      Spouse 1-0

并且您可能想要区分 parent 对 child 的链接与丈夫和妻子的链接。

关于javascript - D3 : Links between spouses in a family tree,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19296064/

相关文章:

javascript - 停止穿过 map 的 d3 路径

javascript - 检查 D3 中潜在的 CSV 文件问题

javascript - 将代码从 Rxjs 转换为 xstream

javascript - 如何在 Chrome 扩展程序中将 URL 添加到下载管理器?

google-chrome - SVG 文本布局在 Chrome、Firefox、Edge 中呈现不同

css - 连接多个 div/进度条的自定义 CSS 行

javascript - 带时间刻度的 D3 直方图

javascript - 如何获取 imageLoaded 的参数 "someelement"?

javascript - 强制浏览器下载一个大的 HTML 文件到磁盘并打开它

javascript - 如何过渡路径的线性渐变