D3 Treemap Layout Resize

Question

Я использую макет demap treemap в контексте RAP. Поэтому мой treemap встроен в представление и должен заполнить это представление изначально и после изменения размера.

Я читал несколько тем об обновлении treemap динамически, но я чувствовал, что ни один из них не касается моей проблемы.

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

Фиксированный размер установлен на инициализацию treemap. Все вычисленные значения (значение, x, y, dx, dy) зависят от установленного размера. Я использую этот treemap для рисования некоторых прямоугольников в svg.

У меня уже есть функция обновления, которая распознает изменение размера представления и множество примеров, которые каким-то образом связаны с обновлением макета treemap, но я не могу собрать его.

_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"); 

Я хотел бы обновить прямоугольники новыми значениями размера и положения, но как получить эти значения в макете? Должен быть другой вариант, кроме создания нового макета.

Answer 1

Вы можете обновить размер и положение всех ячеек в treemap, обновив размер макета, а затем повторно позиционируя/определяя размер каждого из элементов RECT так же, как и при их первом просмотре.

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

} 

Этот метод работает для меня при изменении Zoomable Treemaps примера, но он должен работать на твой, как хорошо.