CODEWITHSUNDEEP
javascriptd3.js
user2975436
user2975436

Reputation: 235

D3 treemap node order

I am new to D3 and I built my first treemap.

I am trying to figure out to order nodes (s) from left to right based + top to bottom instead of right to left + bottom to top. The order is based on each node's size value.

Right now, it looks like

size 20  |  size 100
size 50  |
size 70  |  size 200

but I want like

size 200  | size 70
          | size 50
size 100  | size 20

Here's full JSfiddle.

I really appreciate it in advance.

Upvotes: 2

Views: 3825

Answers (1)

Lars Kotthoff
Lars Kotthoff

Reputation: 109232

You can use the treemap layout's .sort function to achieve this. The default sort is this:

.sort(function(a,b) {
    return b.value - a.value;
})

Changing this to the reverse

.sort(function(a,b) {
    return a.value - b.value;
})

changes the overall layout as well, so in order to get exactly what you want you need to adjust the size as well.

var treemap = d3.layout.treemap()
.size([width/1.5, height])
.sticky(true)
.sort(function(a,b) {
    return a.value - b.value;
})
.value(function(d) { return d.size; });

Complete example here.

Upvotes: 5

Related Questions