d3 链接未正确隐藏
d3 Links Not Properly Hiding
我有一个 d3 力图,它具有能够 hide
/unhide
节点的功能。当用户选择(通过双击一个节点)并选择 hide
时,该节点与其相邻链接一起消失。我的节点消失了,但出于某种原因,链接并没有随之消失。
以下是与此函数相关的代码片段:
// Node behavior for checking if the node is hidden.
node.style("visibility", function(d) {
if (d.data['visible'] === false){
console.log(d.data['id'] + " is hidden.")
return "hidden";
}
else {
return "visible";
}
});
// Link color and visibility based on JSON data.
link.style("stroke", function(d) { return d.data['color'] })
.style("visibility", function(d) {
if (d.data['visible'] === false) {
return "hidden";
}
else {
return "visible";
}});
function hideNode() {
// Checks if any nodes are selected.
if (selectedNodes.length > 0) {
// Iterates over all of the selected nodes.
for (var i = 0; i < selectedNodes.length; i++) {
// Sets the node visible attribute to false and removes the node from the selected array.
selectedNodes[i].data['visible'] = false;
selectedNodes[i].selected = false;
// Iterates through each of the edges to check visibility.
for (var j = 0; j < edges.length; j++) {
if (selectedNodes[i].data.id === edges[j].data.source || selectedNodes[i].data.id === edges[j].data.target) {
edges[j].data['visible'] === false;
}
}
}
}
else alert("No node(s) selected.");
update();
}
function revealNode() {
// nodes.forEach(function(d) {
// d.removed === false;
// });
for (var i = 0; i < nodes.length; i++) {
nodes[i].data['visible'] = true;
}
update();
}
unhide
有效,hide
适用于 nodes
但不适用于 links
。
这里是我的图表和基本代码供参考
http://bl.ocks.org/joeycf/f021e60bb38846dcfaf2
不确定我做错了什么。
我认为问题在于您在这里使用 === 而不是 =:
edges[j].data['visible'] === false;
希望对您有所帮助。
我有一个 d3 力图,它具有能够 hide
/unhide
节点的功能。当用户选择(通过双击一个节点)并选择 hide
时,该节点与其相邻链接一起消失。我的节点消失了,但出于某种原因,链接并没有随之消失。
以下是与此函数相关的代码片段:
// Node behavior for checking if the node is hidden.
node.style("visibility", function(d) {
if (d.data['visible'] === false){
console.log(d.data['id'] + " is hidden.")
return "hidden";
}
else {
return "visible";
}
});
// Link color and visibility based on JSON data.
link.style("stroke", function(d) { return d.data['color'] })
.style("visibility", function(d) {
if (d.data['visible'] === false) {
return "hidden";
}
else {
return "visible";
}});
function hideNode() {
// Checks if any nodes are selected.
if (selectedNodes.length > 0) {
// Iterates over all of the selected nodes.
for (var i = 0; i < selectedNodes.length; i++) {
// Sets the node visible attribute to false and removes the node from the selected array.
selectedNodes[i].data['visible'] = false;
selectedNodes[i].selected = false;
// Iterates through each of the edges to check visibility.
for (var j = 0; j < edges.length; j++) {
if (selectedNodes[i].data.id === edges[j].data.source || selectedNodes[i].data.id === edges[j].data.target) {
edges[j].data['visible'] === false;
}
}
}
}
else alert("No node(s) selected.");
update();
}
function revealNode() {
// nodes.forEach(function(d) {
// d.removed === false;
// });
for (var i = 0; i < nodes.length; i++) {
nodes[i].data['visible'] = true;
}
update();
}
unhide
有效,hide
适用于 nodes
但不适用于 links
。
这里是我的图表和基本代码供参考 http://bl.ocks.org/joeycf/f021e60bb38846dcfaf2
不确定我做错了什么。
我认为问题在于您在这里使用 === 而不是 =:
edges[j].data['visible'] === false;
希望对您有所帮助。