0

我正在尝试将链接动态添加到树中以创建新关系。我的意图是开发一个流程图，而不是一棵树。

代码一开始似乎运行良好，但是在其中一个节点上显示引导弹出窗口后，我的新链接消失了。我在想这棵树正在“重新粉刷”，而我的临时链接不包括在内。

这是“默认情况下”的外观： 在此处输入图像描述

这是我的新链接的外观： 在此处输入图像描述

经过一些循环后，我得到了应该连接的节点的 ID，然后我得到了对这些节点的引用，最后将这些对连接到tree.links. 这是代码

//Create links
var newLinkPairs = getNodeReferencesForLinks(nodes, newLinksIds);
//Add new pair to the links based on the removed duplicates
var linkPairs = tree.links(nodes).concat(newLinkPairs);

var linkEnter = g.selectAll(".node-link")
.data(linkPairs)
.enter();

linkEnter
.insert("path", "g")
.attr("class", "node-link")
.attr("d", (function(d, i){return createConnector(nodeHeight, nodeWidth)})())
.attr("marker-end", "url(#source-target-marker)");

这些是辅助功能：

function createConnector(nodeHeight, nodeWidth) {
    return d3.svg.diagonal()
    .source(function(d) {
        return {
            y: d.source.y + nodeWidth,
            x: ((d.source.height - nodeHeight) /2) + d.source.x}; })
            .target(function(d) {
                return {
                    y: d.target.y,
                    x: ((d.target.height - nodeHeight) /2) + d.target.x}; })
                    .projection(function(d) { return [d.y, d.x]; });    
}

function getNodeReferencesForLinks(nodes, newLinksIds){
    var newLinkPairs =[];

    _.each(newLinksIds, function(p){
        var s = _.findWhere(nodes, {id: p.source});
        var t = _.findWhere(nodes, {id: p.target});

        newLinkPairs.push({source:s,target:t});
        // console.log(s.tasks.join(',') + ' -> ' + t.tasks.join(','));
    });

    return newLinkPairs;
}

有一个更好的方法吗？

4

1 回答 1

1

上面的代码实际上按预期工作。链接正在消失，因为每当显示弹出框时都会调用创建图表的函数。

这里的根本问题是突变。创建图的函数正在修改原始结构，因此连续调用无法创建新链接。

底线：突变是邪恶的。

于 2013-08-29T18:16:32.303 回答