0

我已经与 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();

}
4

0 回答 0