在强制定向图中删除/更改标签

时间:2016-05-05 16:00:32

标签: d3.js label force-layout directed-graph

我有这个代码用于更新我的强制导向图,每当我从各自的数组中删除节点和链接时我都会调用它:

function update_graph() {

link_update = svg.selectAll(".link").data(
        force.links(),
        function (d) {
            return d.source.id + "-" + d.target.id;
        }
);

link_update.enter()
        .insert("line", ".node")
        .attr("class", "link");

link_update.exit()
        .remove();

node_update = svg.selectAll(".node").data(
        force.nodes(),
        function (d) {
            return d.id;
        }
);

node_update.enter()
        .append("circle")
        .attr("class", function (d) {
            return "node " + d.id;
        })
        .attr("r", function (d) {
            return radio / d.group;
        })
        .call(force.drag)
        .on('dblclick', connectedNodes);


//labels
node_update.enter().append("text")
 .attr("dx", function (d) {
 return (radio-7)/d.group;
 })
 .attr("dy", function (d) {
 return (radio-7)/d.group;
 })
 .text(function (d) {
 return d.id;
 })
 .style("stroke", "black");


// Remove the SVG circle whenever a node vanishes from the node list.
node_update.exit()
        .remove();

// Start calling the tick() method repeatedly to lay out the graph.
force.start();

}

节点和链接已从图表中正确删除,但标签仍保留在那里,如何让标签与节点同步并仅显示当前图表上的内容?

小提琴复制问题:https://jsfiddle.net/vzes4h8y/

提前致谢

1 个答案:

答案 0 :(得分:1)

您可以为文本

创建不同的变量
node_updateText = svg.selectAll(".text").data(
        force.nodes(),
        function (d) {
            return d.id;
        }
).enter();

并相应地删除它们。

这是小提琴:https://jsfiddle.net/LmqLtr8e/