D3树形图布局调整大小

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中绘制一些矩形。

我已经有一个更新函数，它可以识别视图的大小调整，并且有很多示例可以处理更新的树形图布局，但是我不能把它放在一起。

_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元素的大小和位置。

_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例如，当为我工作，但它应该为您的正常工作。