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. }
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:
Changing x for 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
  5.  
  6.     const t = cell.transition().duration(750)
  7.          .attr("transform", d => "translate(" + d.target.y0 + "," + d.target.x0 + ")");
  8.      rect.transition(t).attr("height", d => rectHeight(d.target));
  9.      text.transition(t).attr("fill-opacity", d => +labelVisible(d.target));
  10.     tspan.transition(t).attr("fill-opacity", d => labelVisible(d.target) * 0.7);
  11.     }

I also tried replacing height to width
Expand|Select|Wrap|Line Numbers
  1.       y1: (d.y0 - p.y0) / (p.y1 - p.y0) * width,
  2.       y0: (d.y1 - p.y0) / (p.y1 - p.y0) * width,
  3.       x1: d.x0 - p.x0,
  4.       x0: d.x1 - p.x0
2 Weeks Ago #1
0 1707

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
reply views Thread by zhoujie | 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.