d3重置范围后保留缩放/平移

Question

我<svg>的宽度是其容器的100%.调整容器大小时,我更新线性xScale.range()以表示新的调整大小的宽度<svg>.显然,我需要重新应用范围到zoom.x()文档中概述的缩放行为:

如果以编程方式修改了比例的域或范围,则应再次调用此函数.设置x标度也会将标度重置为1并将平移重置为[0,0].

重置scale并且translate是我遇到问题的地方.如果我在调整大小之前已经放大了,我打电话zoom.x( xScale ),现在d3认为图表的比例是1而翻译是0,0因此,我无法缩小或平移.

我处理调整大小的方法不正确吗？

Answer 1

看起来最好的策略是缓存比例并转换值,重置,然后重新应用.为了记录,这段代码(在我的调整大小处理程序中)大致显示了我的解决方案:

// Cache scale
var cacheScale = zoom.scale();

// Cache translate
var cacheTranslate = zoom.translate();

// Cache translate values as percentages/ratio of the full width
var cacheTranslatePerc = zoom.translate().map( function( v, i, a )
{
  return (v * -1) / getFullWidth();
} );

// Manually reset the zoom
zoom.scale( 1 ).translate( [0, 0] );

// Update range values based on resized container dimensions
xScale.range( [0, myResizedContainerWidth] );

// Apply the updated xScale to the zoom
zoom.x( xScale );

// Revert the scale back to our cached value
zoom.scale( cacheScale );

// Overwrite the x value of cacheTranslate based on our cached percentage
cacheTranslate[0] = -(getFullWidth() * cacheTranslatePerc[0]);

// Finally apply the updated translate
zoom.translate( cacheTranslate );


function getFullWidth()
{
  return xScale.range()[1] * zoom.scale();
}