我有一个 d3 力图,每次删除节点时都会重写(覆盖?)文本。我认为解决此问题的解决方案是删除 update()
函数中的文本标签。但是,如果屏幕上有很多节点,我不确定性能是否会很重。我也不确定为什么会发生这种情况。
以下是我认为与该问题有关的代码片段:
function update() {
// refresh list of selected nodes
selectedNodes = nodes.filter(function(d) { return d.selected; });
// Update link data based on edges array.
link = link.data(edges);
// Create new links
link.enter().append("line")
.attr("class", "link")
.style("stroke-width", 1.5);
// Delete removed links
link.exit().remove();
// Update node data based on nodes array.
node = node.data(nodes);
// Create new nodes
node.enter().append("g")
.attr("class", "node")
.attr("id", function(d) { return d.data['id'] })
//.attr("fixed", function(d) { return d.fixed=true })
.call(force.drag)
.on('mouseover', connectedNodes)
.on('mouseleave', restore)
//.on('dblclick', highlight)
.on('dblclick', highlight);
// Delete removed nodes
node.exit().remove();
node.append("circle").attr("r", 11);
node.classed("selected", function(d) { return d === d.selected; })
// Node behavior for checking if selected otherwise colors nodes to color given from JSON.
node.style("fill", function(d) {
if (d.selected === false) {
console.log("Not Highlighting " + d.data['id'] + " selected is " + d.selected);
return d.data['color']
update();
}
else {
console.log("Highlighting " + d.data['id'] + " selected is " + d.selected);
return "yellow";
update();
}
}).select("circle").style("stroke", "black");
// Link color based on JSON data.
link.style("stroke", function(d) { return d.data['color'] });
// Adds text to nodes
node.append("text")
.attr("dx", 12)
.attr("dy", ".35em")
.style("fill", "black")
.text(function (d) { return d.data['label']; });
// Creates an index used to figure out neighbor nodes.
root.edges.forEach(function (d) {
linkedByIndex[d.data.source + "," + d.data.target] = 1;
});
// responsive behavior for graph based on window.
window.addEventListener('resize', resize);
force.on("tick", function() {
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; });
node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
});
force.start();
}
// Delete node with prompt
function deleteNode() {
console.log("Prompted to delete selected nodes.");
if (confirm("Deleting selected element(s) will remove them from the graph entirely.\nAre you sure? (This cannot be undone).")) {
if (selectedNodes.length > 0) {
for (var i = 0; i < selectedNodes.length; i++) {
selectedNodes[i].removed = true;
nodes.splice(nodes.indexOf(selectedNodes[i]), 1);
spliceLinksForNode(selectedNodes[i]);
}
}
else alert("No node(s) selected.");
update();
}
}
function spliceLinksForNode(node) {
toSplice = edges.filter(
function(e) {
return (e.source === node) || (e.target === node); });
toSplice.map(
function(e) {
edges.splice(edges.indexOf(e), 1); });
}
这是删除节点后的屏幕截图。
最佳答案
我也遇到了同样的问题,据我了解,是该小组造成了问题。
对我来说,显式删除元素解决了问题。旁边:
// Exit any old node
node.exit().remove();
我也打电话:
// Remove any old circle
svg.selectAll("circle").remove();
// Remove any old text
svg.selectAll("text").remove();
// Remove any old title
svg.selectAll("title").remove();
在更新功能中。
我希望这个答案对任何人都有帮助,我花了半天时间才完成。
关于javascript - 从 d3 中的节点中删除文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30335368/