Javascript D3树映射布局调整大小
我在RAP上下文中使用d3树映射布局。因此,我的树映射嵌入到一个视图中,应该在最初和调整大小后填充该视图 我读了一些关于动态更新树映射的主题,但我觉得没有一个能够准确地解决我的问题Javascript D3树映射布局调整大小,javascript,d3.js,treemap,Javascript,D3.js,Treemap,我在RAP上下文中使用d3树映射布局。因此,我的树映射嵌入到一个视图中,应该在最初和调整大小后填充该视图 我读了一些关于动态更新树映射的主题,但我觉得没有一个能够准确地解决我的问题 this._treemap = d3.layout.treemap() .value(function(d){return d._value}) .children(function(d) { return d._items }) .size([800,300]) .padding(4
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" );
我想用大小和位置的新值更新矩形,但如何将这些值放入布局中?
除了创建新布局之外,应该还有其他选择,对吗 您可以更新树状图中所有单元的大小和位置,方法是更新布局的大小,然后像第一次渲染时那样重新定位/调整每个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; });
}
在修改示例时,这种技术对我很有效,但对你的也应该有效。不确定我是否理解正确。更新时,是否设置树映射的新大小?