在D3 Force布局中合并节点

Question

我不确定是否可以做到，但是从逻辑上来说，我已经编程了功能。 我正在尝试使用户可以选择多个节点，然后单击“ merge按钮，所有这些节点都将被合并（合并到名为MergedNode#的新节点中）。 这个新节点将继承所有合并节点的所有链接。 该节点还应该能够unmerge ，这将破坏MergedNode并还原其中的所有节点/链接。

这是我正在执行大多数merge处理的代码段（ unmerge忽略unmerge ）。

function mergeNode() {
    mergedNodesStore = [];
    console.log("Attempting to merge nodes.");
    // Check if at least 2 nodes are selected.
    if (selectedNodes.length < 2) {
        alert("Must select at least 2 or more nodes.");
    }
    else {
        // Iterating through each of the selected nodes.
        for (var i = 0; i < selectedNodes.length; i++) {
            mergedNodesStore.push[selectedNodes[i]];

            // Iterates through each of the edges to apply the old links to new merged node.
            for (var j = 0; j < edges.length; j++) {
                var mergedEdge;
                if (selectedNodes[i].data.id === edges[j].data.source) {
                    mergedEdge = edges[j].data.target;
                    edges.push({
                        source: "MergedNode" + mnCount,
                        target: mergedEdge,
                        data: selectedNodes[i].data
                    });
                }
                else if (selectedNodes[i].data.id === edges[j].data.target) {
                    mergedEdge = edges[j].data.source;
                    edges.push({
                        source: "MergedNode" + mnCount,
                        target: mergedEdge,
                        data: selectedNodes[i].data
                    });
                }
            }

            // Remove the merge nodes from the nodes array.
            selectedNodes[i].removed = true;
            nodes.splice(nodes.indexOf(selectedNodes[i]), 1);
            spliceLinksForNode(selectedNodes[i]);
        }

        // Push the "MergeNode" to the mergeNodes array.
        mergedNodes.push({
            id: "MergedNode" + mnCount,
            label: "MergedNode" + mnCount,
            childrenNodes: mergedNodesStore
        });
        mnCount++;
    }
    insertMergeNodes();
}

function insertMergeNodes() {

    // pushes the NODE attributes in the JSON to the nodes array.
    mergedNodes.forEach(function(n) {
        // if node already exists it does not get pushed to the nodes array.e
        if (!(n.data.id in nodesHash)) {
            nodesHash[n.data['id']] = n;
            nodes.push({
                data: n.data,
                selected: n.selected,
                removed: n.removed
            });
        }
        else console.log(n.data.id + "already exists.");
    })

    // sets the source and target to use id instead of index
    edges.forEach(function(e) {
        var sourceNode = nodes.filter(function(n) {
                    return n.data.id === e.data.source;
                })[0],
                targetNode = nodes.filter(function(n) {
                    return n.data.id === e.data.target;
                })[0];

        // push the EDGE attributes in the JSON to the edges array.
        edges.push({
            source: sourceNode,
            target: targetNode,
            data: e.data
        });
    });

    force
            .nodes(mergeNodes)
            .links(edges)
    update();
}

但是，在选择然后合并节点时，不会创建任何新节点，而是会成功删除所选节点。 另外，这样做时我在标签中收到了奇怪的文本覆盖（单独的问题，但现在忽略- 从d3中的Node中删除文本 ）。

我的代码可以在这里找到： http : //bl.ocks.org/joeycf/f021e60bb38846dcfaf2双击Select / Deselect并通过单击按钮完成合并。

感谢您的协助！