d3.js結合了Hierarchical Edge Bundling和Radial Reingold-Tilford Tree +數據

Question

我想（有點）結合Hierarchical Edge Bundling和Radial Reingold-Tilford Tree

看起來有點像這樣（原諒我糟糕的paint.net技能）*：

*孩子應該處於弧形，就像在樹中一樣。

我設置了這個小提琴，顯示了HEB中的簡單數據： https ： //fiddle.jshell.net/d1766z4r/2/

我已經合並了兩種類型的數據（在開頭的評論中，將替換當前變量“類”）：

var classes = [
{"name":"test.cluster1.item1","children": [
      {"name": "test.cluster1.item4","imports":["test.cluster1.item2","test.cluster1.item3"]},
      {"name": "test.cluster1.item5"}
     ]},
{"name":"test.cluster1.item2","imports":["test.cluster1.item3"]},
{"name":"test.cluster1.item3"}
];

如果有更好的方法來組合數據，請隨意更改它。

除了更改數據，我不知道如何繼續，因為我是d3.js和javascript新手，特別是當它來鏈接正確的子項目（項目4），而不是另一個（項目5）。 但是，我會考慮一個答案，它將顯示第1項所有子項的鏈接，作為開始開發此項目的方法。

如果可能的話，請更新這個小提琴或制作一個新的代碼。 當然歡迎任何關於如何進行的建議。

下一步將是使用類似於可折疊樹的方法讓這些孩子在點擊時顯示或隱藏（隨意給出建議，但如果我不知道如何，這可能是一個新的問題這樣做，因為我將不得不處理大量數據，首先為兒童辯護。

最后，每個孩子都可以擁有自己的孩子，但現在只需1行孩子就可以了。 我想以后我會這樣做。

更新：答案不一定是完整的解決方案，每一點（看看我在那里做了什么？）有幫助！

Answer 1

我可能完全偏離你的要求，請澄清是否是這種情況。

TL; DR： 這里是它的外觀的基礎上，我從這個問題的解釋。 添加了一些用於測試的數據。

分層邊緣捆綁，提供了一種可視化圖形中非分層邊緣的方法。 如果你還沒找到，這是d3中實現的論文的鏈接 。

在該示例中，僅通過過濾其他節點來顯示葉節點：

node = node
      .data(nodes.filter(function(n) { return !n.children; }))
    .enter().append("text")
      .attr("class", "node")...

示例中的分層關系由名稱中的點表示，因此cluster1是item1，item2和item3的父級。 在這里 ，如果我們去除過濾器，同時追加節點它的外觀。

現在，我對您的問題的解釋是，您希望使用Hierarchical Edge Bundling來顯示非層次關系（在示例中由導入表示）和'Radial Reingold-Tilford'用於層次關系。

以下是如何做到這一點：

數據格式不需要改變你提出了什么。 下面應該沒問題：

    var classes = [
        {
            "name": "test.cluster1.item1.item4",
            "imports": ["test.cluster1.item2", "test.cluster1.item3"]
        },
        {
            "name": "test.cluster1.item1.item5",
            "imports": []
        }
]

采用packageImports函數從節點獲取分層邊緣：

nodes.forEach(function (d) {
            if(d.children && d.name !== "") d.children.forEach(function (i) {
                imports.push({
                    source: map[d.name],
                    target: i
                });
            });
        });

從Radial Reingold-Tilford示例中添加徑向對角線生成器：

  var diagonal = d3.svg.diagonal.radial()
                .projection(
                        function(d) {
                            debugger;
                            return [d.y, d.x / 180 * Math.PI];
                        }
                );

附加分層邊緣路徑：

treeLink = treeLink
            .data(getHeirarchialEdges(nodes))
            .enter().append("path")
            .attr("class", "tree-link")
            .attr("d", diagonal);

我還添加了mouseover和mouseout函數來突出顯示分層節點，嘗試將鼠標懸停在任何父節點上。