gpt4 book ai didi

javascript - D3 强制布局 : Collapse Subset of Child Nodes (Opacity Change)

转载 作者:行者123 更新时间:2023-12-03 06:17:59 25 4
gpt4 key购买 nike

我正在使用 D3 强制布局并尝试折叠子节点,同时保持图形固定,例如只需更改它们及其链接的不透明度即可。然而,我并不是试图立即折叠所有节点 - 实际上我在每个节点中有一个名为“group”的属性,它可以是 1,2 或 3。

当我单击一个节点时,会出现一个工具提示,其中每个组都有 3 个按钮 - 单击正确的按钮后,我希望该类型的子节点折叠,但其所有子节点(所有 3 个子节点)组)也会崩溃。

这是fiddle

到目前为止,我已经尝试创建节点组 id 和相应链接 ID 的数组,然后使用 JQuery 隐藏这些 DOM 对象,但这不起作用:

function collapseNodes(node, collapseType, isCollapsed) {
var collapseData = minimise(node, collapseType);
var cNodes = collapseData.nodes,
cLinks = collapseData.links;
console.log(collapseData);
var newClass = isCollapsed ? "uncollapsed" : "collapsed";

cNodes.forEach(function(n) {
d3.select(n).style("opacity", 0);
});

cLinks.forEach(function(l) {
d3.select(l).style("opacity", 0);
});
}

function minimise(node, assetMinType = "") {
// Function to minimise a node
var minNodes = [];
var minLinks = [];

if (node.group == 'asset') {
node.children.forEach(function(child) {
if (child.group == assetMinType)
minimiseRec(child, node.id);
});
}
else {
minimiseRec(node, "");

// We want to keep the top node and link
minNodes.shift();
minLinks.shift();

}

function minimiseRec(node, parentID) {
minNodes.push("#" + node.id);
minLinks.push("#parent_" + parentID + "_child_" + node.address);

node.children.map(function(child) {
minimise(child, node.id);
});
}

return { nodes: minNodes, links: minLinks };
}

有人知道如何最好地做到这一点吗?

谢谢。

最佳答案

如果您只想更改不透明度,则相当简单。我想如果你隐藏一个节点的 child 你想隐藏他们的 child 的 child 等等?

首先我设置了一个变量d.hiddenNode。这样我就可以切换不透明度。我把它设置为假。然后点击功能:

.on('click', function(d) {
console.log(d);
if(d.hiddenNode){
hideChildren(d, false);
d.hiddenNode = false;
} else {
hideChildren(d, true);
d.hiddenNode = true;
}

})

现在,因为您希望隐藏 child 的 child 等,所以您需要像这样的递归函数。隐藏链接和节点的一个(我已评论解释):

function hideChildren(node, hide) {

for (var i = 0; i < node.children.length; i++) {
recurseChildren(node.children[i]); //loop through children to hide
}

function recurseChildren(node) {

nodeEnter.each(function(d) { //go through all nodes to check for children
if (d.index == node.index) { //if child is found
d3.select(this).style('opacity', function(){
return hide ? 0 : 1; //toggle opacity depending on d.hiddenNode value
}) //.remove();
}
})

link.each(function(d) { //same with links
if (d.source.index == node.index || d.target.index == node.index ) { //if source or target are hidden hide the link
d3.select(this).style('opacity', function(){
return hide ? 0 : 1;
}) //.remove();
}
})

if (node.children) { //if this node has children, call again but with their children
for (var i = 0; i < node.children.length; i++) {
recurseChildren(node.children[i]);
}
}
}
}

这是更新的 fiddle :http://jsfiddle.net/thatOneGuy/3g4fqfa8/2/

编辑

对于弹出窗口,我刚刚创建了一个包含 3 个组的 div,1,2,3:

<div id='groupChoice'>
<div id='group1' class = 'group' onclick='hideGroup(1)'>1</div>
<div id='group2' class = 'group' onclick='hideGroup(2)'>2</div>
<div id='group3' class = 'group' onclick='hideGroup(3)'>3</div>
</div>

在 CSS 中将其设置为隐藏:

.group{
width: 50px;
height:50px;
border : 1px solid black;
}

#groupChoice{
visibility:hidden;
}

我稍微改变了逻辑,但这是更新后的注释:http://jsfiddle.net/thatOneGuy/3g4fqfa8/3/

需要对链接完成一些工作。我没有足够的时间来完成它,我很抱歉。但这应该可以帮助您开始。

基本上,当您单击一个节点时,会弹出窗口,您选择要隐藏的组,它们就会被隐藏。再次点击同一个节点,选择一个节点来显示。这完成得非常快,所以有很多错误,但基础知识是这样的,所以它应该有帮助:)

关于javascript - D3 强制布局 : Collapse Subset of Child Nodes (Opacity Change),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38998991/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com