antvis/G2

【V5】坐标系范围 #5400

BinghuiXie posted onGitHub

image 坐标系的范围,用上图描述应该是哪一个部分呢?在下图创建坐标系实例的时候,忽略了中间内边距的部分,却把呼吸区域和外边距区域的范围算了进去,没有理解为什么要这样计算 image 或者说: image 这张图里面的计算逻辑是对的吗?因为很明显可以看出,加了 padding 以后,“坐标系的范围” 和标记绘制区域完全错开了

Originally posted by @BinghuiXie in https://github.com/antvis/G2/discussions/5399


这里看上去确实有点问题,应该不需要加 margin,我排查一下。

posted by pearmini over 1 year ago

坐标系的范围就应该是下图红色区域:

<img src="https://github.com/antvis/G2/assets/49330279/c8369242-2609-4bec-b323-23e917db193c" width=640 />

正确创建坐标系应该如下:

 const options = {
    ...layout,
    x: insetLeft,
    y: insetTop,
    width: innerWidth - insetLeft - insetRight,
    height: innerHeight - insetBottom - insetTop,
    transformations: transform.flatMap(useCoordinate),
  };

x 和 y 没有考虑 margin 和 padding 的原因是:在绘制的时候会对 group 进行偏移:

function updateBBox(selection) {
  selection
    .style('x', (d) => d.paddingLeft + d.marginLeft)
    .style('y', (d) => d.paddingTop + d.marginTop)
    .style('width', (d) => d.innerWidth)
    .style('height', (d) => d.innerHeight);
}
posted by pearmini over 1 year ago

Fund this Issue

$0.00
Funded

Pull requests