D3.js樹布局，無重復項

Question

我有以下json字符串：

{  
  "name":1000,
  "children":[  
  {  
     "name":2000,
     "children":[  

     ]
  },
  {  
     "name":3000,
     "children":[  
        {  
           "name":6000,
           "children":[  
              {  
                 "name":8000,
                 "children":[  

                 ]
              }
           ]
        },
        {  
           "name":7000,
           "children":[  

           ]
        }
     ]
  },
  {  
     "name":4000,
     "children":[  
        {  
           "name":5000,
           "children":[  

           ]
        },
        {  
           "name":5000,
           "children":[  

           ]
        },
        {  
           "name":7000,
           "children":[  

           ]
        }
     ]
  }
 ]
}

該樹是使用d3成功創建的，但是，由於它當前正在工作，因此節點7000既是3000節點又是4000節點的子節點。我要實現的是一個單節點7000，有2個鏈接分別將其連接到3000和4000。 請問該怎么做？

// Compute the new tree layout.
    var nodes = tree.nodes(root).reverse(),
        links = tree.links(nodes);

 // Update the links…
    var link = svg.selectAll("path.link")
        .data(links, function (d) { return d.target.id; });

    // Enter any new links at the parent's previous position.
    link.enter().insert("path", "g")
        .attr("class", "link")
        .attr("d", function (d) {
            var o = { x: source.x0, y: source.y0 };
            return diagonal({ source: o, target: o });
        });

如果您需要更多代碼，請告訴我。 謝謝你的幫助。

Answer 1

如果一個節點是另外兩個節點的子節點，那么根據定義，它不是樹 。 因此，如果沒有嘗試，我會假設tree層次結構和布局不會按照您希望的方式進行處理。

“ 多個父節點”示例首先將非循環圖數據布局為樹，然后以僅可視的方式添加循環邊。 在冗長的示例代碼中查找“ multiParent”。

您可以在此處執行以下操作：克隆數據，刪除重復項（例如“ 7000”），然后將其提供給樹形布局。 繪制時，遍歷原始數據並繪制循環邊。 但是，這可能會給您帶來不整潔的布局，因為布局器並不了解所有邊緣，因此無法優化節點位置，從而使交叉邊緣最小化。