javascript - 使用 D3、VX 和 React 的多个 parent 的家谱

标签 javascript reactjs d3.js family-tree

目前,我正在尝试制作一个家谱

  1. 配偶/伴侣(多个)
  2. 配偶/伴侣的子女

我想在 React.js 中完成这项工作,我正在使用 VX

根据 D3 树结构,一个 child 只能有一个 parent ,因此为了根据我的选择生成一棵树,我必须将合作伙伴作为成员的 child 进行对齐。使用额外的 JSON key ,我为合作伙伴设置了样式。请参见下面的示例。

Family Tree with Partners as Children

my repo 中也有同样的内容

Cyril Cherian 在这个 JSFiddle 中尝试与合作伙伴一起实现这棵树的方式给我留下了深刻的印象

`https://jsfiddle.net/cyril123/fcd5q8fv/1/`

我做了一个分支(Javascript)

`https://jsfiddle.net/Vaishak/x6bg9dcu/`

并做了一些改变。

Family Tree wiht Partners

但问题是它不能以干净/直接的方式拥有多个配偶/伴侣,将不得不非常糟糕地修改 JSON。

相同的 JSFiddle 脚本在 my repo 中也可用

我想将两者结合起来,其中

  1. 合作伙伴将与树成员对齐
  2. 合作伙伴不会有来自任何其他节点的线路(除非提到)
  3. child 将来自 Partners 系列的中间

这里有什么解决办法吗? :)

注意:我在 VX's github issue page 上发布了相同的内容,不确定是否会在那里解决。

最佳答案

为了让寻找此问题答案的人更容易。

我可以解决它并得到解决方案,如图 here

请随意看data structure和我的方式drew spouse line .

关于javascript - 使用 D3、VX 和 React 的多个 parent 的家谱,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54363755/

相关文章:

javascript - 使用 d3,如何创建直方图或条形图,其中最后一个条形是大于某个数字的所有值的计数?

javascript - ajax 请求后我的函数调用无法正常工作,仅在页面刷新后工作

reactjs - 删除生产版本中的 html 属性

d3.js - 用硬编码值替换 csv

javascript - 从 1 而不是 0 开始线性刻度 (D3.js)

javascript - 显示倒计时器的警报框

javascript - 如何通过代码拼写检查将所有未知单词添加到字典中,或者当语言不是英语时忽略它们?

reactjs - EACCES : permission denied, 取消链接

angular - 来自服务的同步 Angular 8 HTTP 请求

javascript - 在 Node.js 中管道化 setTimeout