d3.js中的家族树中有多个合作伙伴？ [英] Multiple partners in a family tree in d3.js?

问题描述

我

root 对象存储所有内容。它有一个 children 数组，其中包含最多的代，没有父母。它还包含一个对象，其中包含这些同级对象/节点的子级。在上面的示例中，这是 root.children [2] 。

我想我必须重构数据结构的 children ，并注入有关孩子父母的信息从。

结束会是这样，除了情妇会在左边：

解决方案

为了这样做，我在约翰和女主人之间添加了一个隐藏节点 。

并添加一个孩子到那个隐藏的节点，所以看起来好像约翰和女主人有一个孩子隐藏的儿子
所以JSON看起来像

  {
 name：Mistress，
 id：9000，
 no_parent：true 
}，{
 name： ，//这是Mistress和John之间的新节点
 id：100，
 no_parent：true，//没有父节点
 hidden：true，
 children： {
 //所以这个隐藏的节点将有一个孩子
 //这将使它看起来好像约翰和女主人有一个孩子。 
 name：Hidden Son，
 id：9001 
}] 
}，{
 name：John，
 id：16，
 no_parent：true 
}，
  

工作代码这里

希望这有助！

I have a family tree from Cyril's amazing answer but I'm trying to figure out how to adjust it to support multiple partners. In this case, I added a "Mistress" node and am trying to denote that "Mistress" and "John" had a child named "Hidden Son".

The current data structure works like this:

In that, the root object stores everything. It has a children array which contains the up most "generation" with no parents. It also contains an object that contains the children of these sibling objects/nodes. In the example above, this is root.children[2].

I'm thinking I would have to refactor the data structure's children and inject information about whos parents the child is from. Just having trouble conceptualizing this, as well as the line

The end would would be something like this, except mistress would be on the left side:

解决方案

@medder thanks for the appreciation!

To do that I have added a hidden node between john and mistress.

And added a child to that hidden node, so it appears as if john and mistress have a child "Hidden Son" So the JSON looks like

{
    name: "Mistress",
    id: 9000,
    no_parent: true
  }, {
    name: "",//this is the new node between Mistress and John
    id: 100,
    no_parent: true,//it has no parents
    hidden: true,
    children: [{
      // so this hidden node will have a child 
      // which will make it appear as if john and mistress has a child.
      name: "Hidden Son",
      id: 9001
    }]
  }, {
    name: "John",
    id: 16,
    no_parent: true
  },

Working code here

Hope this helps!

这篇关于d3.js中的家族树中有多个合作伙伴？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！