Javascript 从外部边界框调整大小时，我的内部形状会扭曲

我有问题，而调整我的外部边界框它重新定位我的内部形状，这是一个多边形有点。我可以将任何点拖动到任何增加外部边界框的地方。当我向右拖动右上角的点，然后尝试调整外部边界框的大小时，我看到了问题

所以我所做的是调整大小，我通过采用新的宽度和高度重新绘制多边形，并根据新的宽度和高度缩放我的点。在此之前，我通过应用旧的宽度和高度比例来反转点

arrVertexes = arrVertexes.map(item => {
    return [(xScale.invert(item[0])),  (yScale.invert(item[1])) ];
  });

在根据调整大小的宽度和高度对点应用新比例之前，我会这样反转

arrVertexes = arrVertexes.map(item => {
    return [(xScale.invert(item[0])),  (yScale.invert(item[1])) ];
  });

我就是这样做的

xScale = d3.scaleLinear().domain([0,100]).range([0, width]).clamp(true);
yScale = d3.scaleLinear().domain([0,100]).range([height, 0]).clamp(true);

xScale.domain([0, 100]);
yScale.domain([0, 100]);

这是我的代码笔链接

任何帮助都将不胜感激：-）