D3 TreeMap布局调整大小

Question

我在RAP上下文中使用d3 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时设置了固定大小。所有计算值（value、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" );

我希望更新矩形的大小和位置，但如何将这些值传递给布局呢？除了创建一个新布局外，应该还有其他选项吧？

- Rene Richter

---

我不确定我是否理解正确。在更新时，您是否设置了新的treemap大小？ - Lars Kotthoff

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

}

这种技术对我修改可缩放矩形树图示例时很有效，但对你的也应该适用。

- Eric