deltoss / d3-mitch-tree

D3 plugin to create stunning interactive tree visualisations.
MIT License
82 stars 42 forks source link

Apply CSS on child nodes expanded on click of their parentNode expendanded #133

Closed weird-oecophylla closed 2 years ago

weird-oecophylla commented 2 years ago

Is it possible to apply css on child nodes when we click on the parent node we expand ?

I'm trying to do it by triggering the expand event.

But the css is only applied on each childs when I click on one of the child node.

When I click on the Parent node for expanding, the default css is applied.

.on("nodeClick", function(event, data) {

                        console.log("ACTION DATA CSS")
                        console.log(event)
                        let fils = d3.selectAll(event.nodeDataItems)
                        console.log(fils)
                        fils.attr("id",function(d) {return btoa(d.id).replace('=', '');})
                        fils.filter(function(d) {
                            let borderColor = "gray";
                            let borderWidth = "1px";
                            if (d.data.ID){
                                let foundWidth = false
                                let foundColor = false
                                for (let i=0;i<node_fields["node_content"].length;i++){
                                    if (node_fields["node_content"][i]["ID"] == d.data.ID){
                                        if (node_fields["node_content"][i]["borderWidth"]){
                                            borderWidth = node_fields["node_content"][i]["borderWidth"]
                                            foundWidth = true
                                        }
                                        if (node_fields["node_content"][i]["borderColor"]){
                                            borderColor = node_fields["node_content"][i]["borderColor"]
                                            foundColor = true
                                        }
                                    }
                                    if (foundWidth && foundColor){
                                        break
                                    }
                                }
                            }
                            d3.select("#"+btoa(d.data.id).replace('=', '')+">g>rect").attr("stroke-width", borderWidth)
                            d3.select("#"+btoa(d.data.id).replace('=', '')+">g>rect").attr("stroke", borderColor)
                        });
                        fils.selectAll(".body-group>.d3plus-textBox>text")
                            .style("font-weight", "bold")
                            .style("font-size", "20px")

                        let deroulement = $("#deroulement")
                        deroulement.empty()
                        deroulement.css("border-top", "0.5px lightgray solid")
                        //deroulement.css("border-bottom", "0.5px lightgray solid")
                        tree.getWholePath(event.nodeDataItem)

                        // This would cancel collapse of nodes,
                        // but it'll still select the node
                        // and center to it
                        this.removeSelection(this.getRoot());
                        event.nodeDataItem.selected = true;
                        if (this.getAllowNodeCentering())
                            this.centerNode(event.nodeDataItem);
                        this.update();

                        // Cancel the collapse event
                        /*
                        if (event.type === 'collapse')
                            event.preventDefault();
                        if (event.type === 'centerNode')
                            event.preventDefault();
                        */

                    })