为什么D3强制有向图中的新节点不能始终如一？

Question

我一直在与d3合作一段时间，试图创建一个交互式生态系统资源管理器工具，用于绘制物种之间的关系。最近我尝试添加一个功能，让用户在力导向图中显示或隐藏物种（节点）。我尝试过其他的例子，尽管代码有效 - 但它的工作方式不一致。

出于某种原因，当我添加一个节点时，它有时是不可见的。图表移动就好像添加了节点但是它没有显示出来。我觉得它正在添加它但是然后节点再次被强制隐藏在force.on（“tick”）代码中，但不知道为什么。我在下面发布了相关代码，非常感谢任何想法！ toggleNode函数确定是应该显示还是隐藏节点 - 基本上只是拼接或添加到节点数组。我将数据保存在一个名为dataset的数组中，该数组存储一个标志以指示节点是否可见。

var force = d3.layout.force()
.gravity(.05)
.distance(100)
.charge(-100)
.size([w, h]);

var nodes = force.nodes(), links = force.links(); // arrays to hold data

var vis = d3.select("#chart").append("svg:svg")
.attr("width", w)
.attr("height", h);         

force.on("tick", function() {

vis.selectAll("circle.node")
    .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

vis.selectAll("line.link")
    .attr("x1", function(d) { return d.source.x; })
    .attr("y1", function(d) { return d.source.y; })
    .attr("x2", function(d) { return d.target.x; })
    .attr("y2", function(d) { return d.target.y; });

});

function restart() {

// UPDATE nodes
var node = vis.selectAll("circle.node")
    .data(nodes, function(d) { return d.id;});

// ENTER new nodes
var nodeEnter = node.enter().append("svg:circle")
        .attr("class", "node")
        .attr("cx", function(d) { return d.x; })
        .attr("cy", function(d) { return d.y; })
        .style("fill", function(d) { return groupColors[(d.group)-1]; })
        .style("stroke","fff")
        .style("stroke-width",1)
        .on("mousedown", function(d) {
            clickNode(d);
            })
        .call(force.drag);

// REMOVE deleted nodes
var nodeExit = node.exit().remove();

force.start();
}

// Add the nodes and links to the vis
function createVis(json) {

    dataset = json; // store data in global

    for (var i = 0; i < dataset['nodes'].length; i++) {
        // fill node info
        nodes.push(dataset['nodes'][i]);
    }

    restart();  
}

// Remove node and associated links.
function toggleNode(nodeKey,eol_id) {

    console.log(nodeKey + ': ' + eol_id);

    var tLabel; // value for toggle label

    if ( dataset['nodes'][nodeKey]['isHidden'] == 0 ) {

        // node is visible, so hide it
        tLabel = 'Show';
        for( var k=0; k<nodes.length; k++ ) {
            if ( nodes[k]['eol_id'] == eol_id ) {
                nodes.splice(k, 1); // remove this node
                break;
            }
        }
        dataset['nodes'][nodeKey]['isHidden'] = 1;
        console.log('node removed: ' + nodeKey);

    } else {

        dataset['nodes'][nodeKey]['isHidden'] = 0;

        nodes.push(dataset['nodes'][nodeKey]);

        tLabel = 'Hide';

    }

    $('#primary_title_toggle').html('&nbsp; <a href="#" onclick="toggleNode(' + nodeKey + ',\'' + eol_id + '\')">' + tLabel + '</a><br>');

    restart();

}