Question

我想创建两个共享相同根的树。在我的分层JSON文件中，我有根父和两个名为left和right的子属性。其中一个孩子分支出来制作正确的树，另一个孩子做出左树。在根的左侧，我希望嵌套的左子项只展开，只有右侧嵌套的子项才能在右侧展开。树的根是唯一可以扩展左右子节点的节点。

var treeData = [
  {
    "name": "Top Level",
    "left": [
      {
        "name": "Left 1",
        "left": [
          {
            "name": "Left 1 left Child 1",
          },
          {
            "name": "Left 1 left Child 2",
          }
        ],
        "right": [
          {
            "name": "Left 1 right Child 1",
          }
        ]
      },
      {
        "name": "Left 2",
        "left": [

        ],
        "right": [
          {
            "name": "Left 2 right Child 1",
          }
        ]
      }
    ],
    "right": [
      {
        "name": "Right 1",
        "left": [
          {
            "name": "Right 1 left Child 1",
          },
          {
            "name": "Right 1 left Child 2",
          }
        ],
        "right": [

        ]
      },
      {
        "name": "Right 2",
        "left": [

        ],
        "right": [
          {
            "name": "Right 2 right Child 1",
          }

        ]
      }
    ]
  }
];

这应显示树形图：

我将如何实现这一目标？我想到绘制两棵树共享相同的父根，只是翻转右边的深度：

var leftTree = d3.layout.tree()
  .size([height, width])
  .children(function(d){return d.left;});//this will provide right children.
var rightTree = d3.layout.tree()
    .size([height, width])
  .children(function(d){return d.right;});//this will provide right children.

    // Call update function with tree parameter, Normalize for fixed-depth.
  nodes.forEach(function(d) { 
                   if(tree == rightTree) { 
                       d.y = d.depth * 90; 
                   } else { //tree is left tree
                       d.y = - d.depth * 90;}});

然后我在leftTree和rightTree上调用我的函数更新（类似于：http://bl.ocks.org/d3noob/8323795）。唯一的问题是当我绘制链接时，我认为这与将节点ID分配给节点有关。

    // Declare the nodes
  var node = svg.selectAll("g.node")
      .data(nodes, function(d) { return d.id || (d.id = ++i); });
    ...
    // Declare the links…
      var link = svg.selectAll("path.link")
          .data(links, function(d) { return d.target.id; });

      // Enter the links.
      link.enter().insert("path", "g")
          .attr("class", "link")
          .attr("d", diagonal);

结果如下：我觉得我很亲密，但绘制链接搞砸了。
如果我将JSON文件的结构更改为在整个子属性中包含左右子项，然后在创建仅绘制其受尊重方的节点的节点时添加某种条件，会更容易吗？？例如，在绘制左子树时，我查看根“顶级”的所有子节点并在“左”属性中绘制节点，然后绘制左侧节点左侧嵌套子节点。然后，使用右侧属性中的子项及其嵌套的右子项绘制右子树。

感谢您的帮助！

Answer 1

我遇到了类似的问题，并创建了一个示例文件。这应该可以帮助您Double side tree using D3JS。

d3.js多个树相同的根

1 个答案: