I am new to d3 and im trying to represent a codemodel with d3 circle packing. The problem is that there are too many classes and interfaces and the labels of the circles are hard to read. I figured out that I may need to hide the name of the parent node to make things more clear like this:
var node = svg.append("g").selectAll("circle")
.data(root.descendants())
.join("circle")
.on("mouseover", d =>{
//hide the label of the parent of the node
var parentNodeLabel = label.filter((e) =>{
return e == d.parent;
})
.style("fill-opacity", "0")
})
}
it works as intended, but then I realized that hiding the name only of the parent doesn't really do much, so now I am trying to hide the names of all ancestors. I tried like this:
.on("mouseover", function(d) {
var ancestorNodeLabels = label.filter((e) =>{
return e == d.ancestors().slice(1);
})
.style("fill-opacity", "0")
})
}
but it doesn't seem to work at all. I need tips on how to accomplish what I'm trying to do.
nevermind, I am just stupid. I need to check if e is included in the ancestors not to assign it to them.
var ancestorNodeLabels = label.filter((e) =>{
return (d.ancestors().slice(1)).includes(e);
})
.style("fill-opacity", "0")