Horizontal icicle to vertical icicle

See more:

Javascript

TreeListView

d3js

I need to rotate this Icicle to a vertical(up-down) way: https://observablehq.com/@d3/zoomable-icicle. The first screen option works but when I clicked the item, it fails. The following changes work:

.attr("transform", d => "translate(" + d.target.x0 + "," + d.target.y0 + ")");

.attr("width", d => d.x1 - d.x0 - 1)
.attr("height", d => rectHeight(d))

function rectHeight(d) {
    return d.y1 - d.y0 - Math.min(1, (d.y1 - d.y0) / 2);
}

The function that fails is:

function clicked(p) { focus = focus === p ? p = p.parent : p;

    root.each(d => d.target = {
      x0: (d.x0 - p.x0) / (p.x1 - p.x0) * height,
      x1: (d.x1 - p.x0) / (p.x1 - p.x0) * height,
      y0: d.y0 - p.y0,
      y1: d.y1 - p.y0
    });

    const t = cell.transition().duration(750)
         .attr("transform", d => "translate(" + d.target.x0 + "," + d.target.y0 + ")");
     rect.transition(t).attr("height", d => rectHeight(d.target));
     text.transition(t).attr("fill-opacity", d => +labelVisible(d.target));
    tspan.transition(t).attr("fill-opacity", d => labelVisible(d.target) * 0.7);
    }

What I have tried:

function clicked(p) { focus = focus === p ? p = p.parent : p;

    root.each(d => d.target = {
      x1: (d.x0 - p.x0) / (p.x1 - p.x0) * height,
      x0: (d.x1 - p.x0) / (p.x1 - p.x0) * height,
      y1: d.y0 - p.y0,
      y0: d.y1 - p.y0
    });

    const t = cell.transition().duration(750)
         .attr("transform", d => "translate(" + d.target.y0 + "," + d.target.x0 + ")");
     rect.transition(t).attr("height", d => rectHeight(d.target));
     text.transition(t).attr("fill-opacity", d => +labelVisible(d.target));
    tspan.transition(t).attr("fill-opacity", d => labelVisible(d.target) * 0.7);
    }

I also tried

function clicked(p) { focus = focus === p ? p = p.parent : p;

    root.each(d => d.target = {
      y1: (d.y0 - p.y0) / (p.y1 - p.y0) * height,
      y0: (d.y1 - p.y0) / (p.y1 - p.y0) * height,
      x1: d.x0 - p.x0,
      x0: d.x1 - p.x0
    });

    const t = cell.transition().duration(750)
         .attr("transform", d => "translate(" + d.target.y0 + "," + d.target.x0 + ")");
     rect.transition(t).attr("height", d => rectHeight(d.target));
     text.transition(t).attr("fill-opacity", d => +labelVisible(d.target));
    tspan.transition(t).attr("fill-opacity", d => labelVisible(d.target) * 0.7);
    }

The last I tried

function clicked(p) { focus = focus === p ? p = p.parent : p;

    root.each(d => d.target = {
      y1: (d.y0 - p.y0) / (p.y1 - p.y0) * width,
      y0: (d.y1 - p.y0) / (p.y1 - p.y0) * width,
      x1: d.x0 - p.x0,
      x0: d.x1 - p.x0
    });

    const t = cell.transition().duration(750)
         .attr("transform", d => "translate(" + d.target.x0 + "," + d.target.y0 + ")");
     rect.transition(t).attr("height", d => rectHeight(d.target));
     text.transition(t).attr("fill-opacity", d => +labelVisible(d.target));
    tspan.transition(t).attr("fill-opacity", d => labelVisible(d.target) * 0.7);
    }