CODEWITHSUNDEEP
javascriptd3.jstreemap
Rene Richter
Rene Richter

Reputation: 51

D3 Treemap Layout Resize

I'm using the d3 treemap layout in a RAP Context. So my treemap is embedded in a view and should fill this view initially and after resizing.

I read some topics about updating the treemap dynamically but I felt that none of them addresses my problem precicely.

this._treemap = d3.layout.treemap()
    .value(function(d){return d._value})
    .children(function(d) { return d._items })
    .size([800,300])
    .padding(4)
    .nodes(this);

 var cells = selection
    .data(this._treemap)
    .enter()
    .append("svg:g")
    .attr("class", "item")
    .append("rect")
    .attr("x", function(d){return d.x;})
    .attr("y", function(d){return d.y;})
    .attr("width", function(d){return d.dx;})
    .attr("height", function(d){return d.dy;})
    .attr("fill", function(d){return d.children ? color(d._text) : color(d.parent._text)})
    .attr("stroke", "black")
    .attr("stroke-width",1);

A fixed size is set on the initialisation of the treemap. All computed values(value,x,y,dx,dy) depend on the size set. I use this treemap to paint some rectangles in an svg.

I already have an update function that recognizes the resizing of the view and a are plenty of examples that somehow deal with updating the treemap layout but I can't put it together.

_updateLayout: function() {

    this._width = this._chart._width;
    this._height = this._chart._height;
    console.log(this._height);
    console.log(this._width);
    this._layer = this._chart.getLayer( "layer" );

I would like to update the rectangles with new values for size and position but how do I get these values into the layout? There should be another option than creating a new layout right?

Upvotes: 5

Views: 2789

Answers (1)

Eric
Eric

Reputation: 105

You can update the size and position of all the cells in the treemap by updating the size of the layout and then re-positioning/sizing each of the RECT elements as you did when they were first rendered.

_updateLayout : function () {

    // Existing code
    this._width = this._chart._width;
    this._height = this._chart._height;
    console.log(this._height);
    console.log(this._width);
    this._layer = this._chart.getLayer("layer");

    // New code
    this._treemap.size([this._width, this._height]);
    cells.attr("x", function (d) { return d.x; })
         .attr("y", function (d) { return d.y; } )
         .attr("width", function (d) { return d.dx; })
         .attr("height", function (d) { return d.dy; });

}

This technique worked for me when modifying the Zoomable Treemaps example, but it should work for yours as well.

Upvotes: 2

Related Questions