I am trying to build a bowtie hierarchy diagram using Javascript d3. I have the code working for one way hierarchy but I haven’t been able to make it expand/collapse it smoothly both ways. I have tried many things so have multiple different versions of code, but adding this one since it is working but doesnt have expand/collapse functionality yet here.

I tried adding update(), collapse() functions normally as I would for a 1-way hierarchy and nothing seems to work for this particular bow tie diagram,

Any help, advice or pointers in the right direction would be greatly appreciated.

function createHierarchyTree(entity_id, treeDataL, treeDataR){

// set the dimensions and margins of the diagram
    var margin = {top: 50, right: 50, bottom: 50, left: 50},
        width = 2000 - margin.left - margin.right,
        height = 2000 - margin.top - margin.bottom;

// declares a tree layout and assigns the size
    var tree = d3.tree()
        .size([width, height]);

// create 2x trees using d3 hierarchy
// this is where the computation of coordinates takes place
    var nodesL = tree(d3.hierarchy(treeDataL));
    var nodesR = tree(d3.hierarchy(treeDataR));

// get arrays of nodes - need v6
    nodesLArray = Array.from(nodesL);
    nodesRArray = Array.from(nodesR);

// switch out nodesR root for nodesL
// here the choice is to assign coords of root of LH tree to RH
    nodesLRoot = nodesLArray.find(n => n.data.name == treeDataL.name);
    nodesRRoot = nodesRArray.find(n => n.data.name == treeDataL.name);
    nodesRRoot.x = nodesLRoot.x;
    nodesRRoot.y = nodesLRoot.y;

// this is kinda like the 'important bit'
// REMEMBER for horizontal layout, flip x and y...
// LH: halve and negate all y's in nodesL add width / 2
    nodesLArray.forEach(n => n.y = ((n.y * 0.5) * -1) + width / 2);
// RH: halve and add width / 2 to all y's nodesR
    nodesRArray.forEach(n => n.y = (n.y * 0.5) + width / 2);

// now sticking a bit more closely to the tutorial in link 3
// append svg
    var svg = d3.select("#hierarchy_tree")
        .append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom);

// align g with margin
    var g = svg.append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// render both trees
    [nodesL, nodesR].forEach(function(nodes, i) {

// adds the links between the nodes
// need to select links based on index to prevent bad rendering
        var link = g.selectAll(`links${i}`)
            .data( nodes.descendants().slice(1))
            .enter()
            .append("path")
            .attr("class", `link links${i}`) // note two classes
            .attr("d", function(d) {
                // x and y flipped here to achieve horizontal placement
                return `M${d.y},${d.x}C${d.y},${(d.x + d.parent.x) / 2} ${d.parent.y},${(d.x + d.parent.x) / 2} ${d.parent.y},${d.parent.x}`
            })


        function click(d){
            alert(JSON.stringify(d.data))
            if (d.data.children) {
                    d.data._children = d.data.children;
                    d.data.children = null;
            } else {
                if (d.data._children) {
                    d.data.children = d.data._children;
                    d.data._children = null;
                }
            }

                
        }

// adds each node as a group
// need to select nodes based on index to prevent bad rendering
        var node = g.selectAll(`.nodes${i}`)
            .data(nodes.descendants())
            .enter()
            .append("g")
            .attr("class", `node nodes${i}`) // note two classes
            .attr("transform", function(d) {
                // x and y flipped here to achieve horizontal placement
                return `translate(${d.y},${d.x})`;
            })
            .on("click", function(event, d) {
                click(d)
            });

// adds the circle to the node
        node.append("circle")
            .attr("r", 10);

// adds the text to the node
        node.append("text")
            .attr("dy", ".35em")
            .attr("y", function(d) { return d.children ? -20 : 20; })
            .style("text-anchor", "middle")
            .text(function(d) { return d.data.name; });

    });

}