D3 Treemap 레이아웃 크기 조정

Question

RAP 컨텍스트에서 d3 트리 맵 레이아웃을 사용하고 있습니다. 따라서 내 트리 맵은 뷰에 포함되어 있으며 처음부터 크기를 조정 한 후에이 뷰를 채워야합니다.

동적으로 트리 맵을 업데이트하는 것에 대한 몇 가지 주제를 읽었지만 그 중 어느 것도 내 문제를 정확하게 해결하지 못한다고 느꼈습니다.

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

고정 크기는 트리 맵의 초기화시 설정됩니다. 모든 계산 된 값 (값, x, y, dx, dy)은 설정된 크기에 따라 다릅니다. 이 트리 맵을 사용하여 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

트리 맵의 모든 셀의 크기와 위치를 업데이트 할 수 있습니다. 레이아웃의 크기를 업데이트 한 다음 처음 RECT 요소를 다시 렌더링 할 때와 마찬가지로 RECT 요소의 위치와 크기를 조정할 수 있습니다. Zoomable Treemaps 예를 수정할 때

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

} 

이 기술은 나를 위해 일하지만, 그것은뿐만 아니라 당신을 위해 작동합니다.