CODEWITHSUNDEEP
javascriptd3.js
Hossein Akbarzadeh
Hossein Akbarzadeh

Reputation: 344

Zoomable icicle d3 right to left

How to change alignment of this link from right to left?

now alignment is top to bottom

Upvotes: 0

Views: 361

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102188

Instead of:

var x = d3.scale.linear()
    .range([0, width]);

It has to be:

var x = d3.scale.linear()
    .range([width, 0]);

Edit: if you want the icicles going from the right to the left (parents at the right, children at the left), this is what you have to do:

First, invert the range of the y scale:

var y = d3.scale.linear()
    .range([height,0]);

And invert all the attributes of the rectangles:

rect = rect
  .data(partition(d3.entries(root)[0]))
.enter().append("rect")
  .attr("y", function(d) { return x(d.x); })
  .attr("x", function(d) { return y(d.y); })
  .attr("height", function(d) { return x(d.dx); })
  .attr("width", function(d) { return y(d.dy); })
  .attr("fill", function(d) { return color((d.children ? d : d.parent).key); })
  .on("click", clicked);

Here is a fiddle showing it: https://jsfiddle.net/dLeq2q2d/

PS: the zoom will not work anymore, you'll have to change it as well.

Upvotes: 4

Related Questions