472,352 Members | 1,538 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 472,352 software developers and data experts.

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 + ")");
  3. .attr("width", d => d.x1 - d.x0 - 1)
  4. .attr("height", d => rectHeight(d))
  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;
  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.     });
  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
  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
Sep 10 '21 #1
0 4602

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

Similar topics

by: Showjumper | last post by:
Hi, I have developed an upload server controls to be reused over a number of projects. One of the tasks it needs to handle is to rotate an image. I...
by: byrd48 | last post by:
Hi, I am developing a web site which allows users to upload and share photos. I have a datalist which lists the photos and has the usual edit,...
by: Peter Proost | last post by:
Hi group, I got the following piece of code which draws a square with stars round it, now I want the stars to rotate round the square, I can do...
by: santel_helvis | last post by:
Hi All, Could anyone tell me how to rotate the image in javascript. Which concepts I should concentrate to rotate the image
by: iwdu15 | last post by:
hi, im trying to rotate a gdi drawn object on my form with a keypress....forinstance when i push the down arrow, for it to rotate the object drawn...
by: lovecreatesbeauty | last post by:
I write a function to rotate a matrix by 90 degrees clockwise, this function works on a matrix of specific size, for example, it rotates a 4*4...
by: RC | last post by:
First, this is a SVG issue, not 100% of XML issue. But I can't find SVG group to post this. Since SVG is XML file, I post here hopefully someone...
by: Samuel Shulman | last post by:
Is it possible and how to rotate pictures in HTML document Thank you, Samuel
by: Joey_Stacks | last post by:
Does anyone know of a scipt that will rotate random div layers on page refresh? I have a primary content area front and center on my site...
by: Dariusz.Donimirski | last post by:
I must rotate bmp using Xlib without change bmp's memory. If someone knows how I can do this, please help me. dariusz sorry about my english,...
by: Kemmylinns12 | last post by:
Blockchain technology has emerged as a transformative force in the business world, offering unprecedented opportunities for innovation and...
by: Naresh1 | last post by:
What is WebLogic Admin Training? WebLogic Admin Training is a specialized program designed to equip individuals with the skills and knowledge...
by: antdb | last post by:
Ⅰ. Advantage of AntDB: hyper-convergence + streaming processing engine In the overall architecture, a new "hyper-convergence" concept was...
by: Matthew3360 | last post by:
Hi there. I have been struggling to find out how to use a variable as my location in my header redirect function. Here is my code. ...
by: AndyPSV | last post by:
HOW CAN I CREATE AN AI with an .executable file that would suck all files in the folder and on my computerHOW CAN I CREATE AN AI with an .executable...
by: Arjunsri | last post by:
I have a Redshift database that I need to use as an import data source. I have configured the DSN connection using the server, port, database, and...
by: Oralloy | last post by:
Hello Folks, I am trying to hook up a CPU which I designed using SystemC to I/O pins on an FPGA. My problem (spelled failure) is with the...
by: Carina712 | last post by:
Setting background colors for Excel documents can help to improve the visual appeal of the document and make it easier to read and understand....
by: BLUEPANDA | last post by:
At BluePanda Dev, we're passionate about building high-quality software and sharing our knowledge with the community. That's why we've created a SaaS...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.