javascriptd3.jsfiltercircle-pack

how can i hide the names of ancestors of a node


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.


Solution

  • 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")