CODEWITHSUNDEEP
javascripthtmld3.jstree
Programadora
Programadora

Reputation: 19

Right to Left Icicle Tree

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.

Upvotes: 0

Views: 52

Answers (1)

Dan
Dan

Reputation: 1591

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);
}

Upvotes: 1

Related Questions