469,142 Members | 1,134 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,142 developers. It's quick & easy.

Rotate D3 Icicle

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:

Expand|Select|Wrap|Line Numbers
  1. .attr("transform", d => "translate(" + d.target.x0 + "," + d.target.y0 + ")");
  2.  
  3. .attr("width", d => d.x1 - d.x0 - 1)
  4. .attr("height", d => rectHeight(d))
  5.  
  6. function rectHeight(d) {
  7.     return d.y1 - d.y0 - Math.min(1, (d.y1 - d.y0) / 2);
  8. }
  9.  
The function that fails is:
Expand|Select|Wrap|Line Numbers
  1. function clicked(p) { focus = focus === p ? p = p.parent : p;
  2.  
  3.     root.each(d => d.target = {
  4.       x0: (d.x0 - p.x0) / (p.x1 - p.x0) * height,
  5.       x1: (d.x1 - p.x0) / (p.x1 - p.x0) * height,
  6.       y0: d.y0 - p.y0,
  7.       y1: d.y1 - p.y0
  8.     });
  9.  
  10.     const t = cell.transition().duration(750)
  11.          .attr("transform", d => "translate(" + d.target.x0 + "," + d.target.y0 + ")");
  12.      rect.transition(t).attr("height", d => rectHeight(d.target));
  13.      text.transition(t).attr("fill-opacity", d => +labelVisible(d.target));
  14.     tspan.transition(t).attr("fill-opacity", d => labelVisible(d.target) * 0.7);
  15.     }

What I have tried:
Replacing x and y
Expand|Select|Wrap|Line Numbers
  1. x1: (d.x0 - p.x0) / (p.x1 - p.x0) * height,
  2.       x0: (d.x1 - p.x0) / (p.x1 - p.x0) * height,
  3.       y1: d.y0 - p.y0,
  4.       y0: d.y1 - p.y0
Changing translate
Expand|Select|Wrap|Line Numbers
  1. .attr("transform", d => "translate(" + d.target.y0 + "," + d.target.x0 + ")");

I also tried changing height for width
2 Weeks Ago #1
0 1730

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

7 posts views Thread by Showjumper | last post: by
3 posts views Thread by byrd48 | last post: by
2 posts views Thread by Peter Proost | last post: by
17 posts views Thread by santel_helvis | last post: by
1 post views Thread by iwdu15 | last post: by
8 posts views Thread by lovecreatesbeauty | last post: by
8 posts views Thread by Samuel Shulman | last post: by
10 posts views Thread by Joey_Stacks | last post: by
2 posts views Thread by Dariusz.Donimirski | last post: by
1 post views Thread by CARIGAR | last post: by
1 post views Thread by Mortomer39 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.