How can I mirror the d3 tree? I have use these code https://observablehq.com/@d3/zoomable-icicle but I can't put the father at right. I think is the attr("transform", d => translate(${d.y0},${d.x0})) and I tried function
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;
}
}
But it does not work.
Here's an example.
We can define a function to get the mirrored horizontal position:
function getFlippedPosition(d) {
return width - ((d.depth + 1) * (d.y1 - d.y0));
}
Then creating the groups becomes
const cell = svg
.selectAll("g")
.data(root.descendants())
.join("g")
.attr("transform", d => `translate(${getFlippedPosition(d)},${d.x0})`)
Similarly, the clicked function can be updated as follows:
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);
}