¿Cómo puedo reflejar el árbol d3? He usado este código https://observablehq.com/@d3/zoomable-icicle pero no puedo poner al padre a la derecha. Creo que es attr("transform", d => translate(${d.y0},${d.x0})) y probé la función
positions(d){ console.log(d.depth) if (d.depth == 0){ d = d.children[0].children[0].children[0]; return (d.x0); } else if(d.depth == 1){ d = d.children[0]; return (d.x0); } else if(d.depth == 2){ d = d.parent; return (d.x0); } else{ return 0; } }Pero no funciona.
Aquí hay un ejemplo .
Podemos definir una función para obtener la posición horizontal reflejada:
function getFlippedPosition(d) { return width - ((d.depth + 1) * (d.y1 - d.y0)); }Entonces la creación de los grupos se convierte en
const cell = svg .selectAll("g") .data(root.descendants()) .join("g") .attr("transform", d => `translate(${getFlippedPosition(d)},${d.x0})`) De manera similar, la función en la que se clicked se puede actualizar de la siguiente manera:
function clicked(event, 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, // this line is new: depth: d.depth - p.depth, }); const t = cell.transition().duration(750) // this line is updated: .attr("transform", d => `translate(${getFlippedPosition(d.target)},${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); }