Necesito rotar este carámbano de forma vertical (arriba-abajo): https://observablehq.com/@d3/zoomable-icicle . La primera opción de pantalla funciona, pero cuando hice clic en el elemento, falla. Los siguientes cambios funcionaron:

 .attr("transform", d => "translate(" + d.x0 + "," + d.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); }

Tengo problemas para rotar el zoom o hacer clic en la función:

 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); }

He intentado invertir x e y. Cambié la función a:

 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); }

Sigue sin funcionar, no se que mas hacer.