Javascript 如何在D3.js中放大多边形

我正试图弄清楚如何进行与下面示例中所示相同的缩放行为，但是使用法线多边形而不是地理路径

我已经在这里看到了一些答案，所以这类的地址，但动画是起伏或奇怪的跳跃

我的html是

<div id="map-container">
<svg version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     id="canvas"
     viewBox="0 0 4328 2880">
    <defs>
        <pattern id="mapPattern"
                 patternUnits="userSpaceOnUse"
                 x="0"
                 y="0"
                 width="4328"
                 height="2880">
            <image xlink:href="/development/data/masterplan.png"
                   x="0"
                   y="0"
                   width="4328"
                   height="2880"></image>
        </pattern>
    </defs>
    <g id="masterGroup">
        <rect fill="url(#mapPattern)"
              x="0"
              y="0"
              width="4328"
              height="2880" />
    </g>
</svg>

我想能够添加一些多边形在同一组作为地图矩形，然后缩放多边形的边界。有谁能让我看看这种行为吗

---

我还应该补充一点，我不想使用滚轮或平移。只需放大单击的多边形，然后在再次单击时缩小即可。

这可能会对您有所帮助。今天早些时候，我在这里回答了一个问题：

这是我整理的小提琴：

我添加了一个转换：svg.transition.duration1000.attr'transform'，函数d{

请注意，如果单击其中一个节点，该区域将移动以适应新布局的大小

在问题的链接中解释了基本原理，但基本上我得到了边界框并相应地翻译了SVG，因此我翻译并缩放到了新矩形的大小

看一看，很容易理解。以下是过渡的主要部分：

svg.transition().duration(1000).attr('transform',function(d){

var testScale = Math.max(rectAttr[0].width,rectAttr[0].height)
var widthScale = width/testScale
var heightScale = height/testScale 
var scale = Math.max(widthScale,heightScale);

var transX = -(parseInt(d3.select('#invisRect').attr("x")) + parseInt(d3.select('#invisRect').attr("width"))/2) *scale + width/2;
var transY = -(parseInt(d3.select('#invisRect').attr("y")) + parseInt(d3.select('#invisRect').attr("height"))/2) *scale + height/2;

return 'translate(' + transX + ','+ transY + ')scale('+scale+')' ;
})

因此，在代码中，上面代码段中显示的rectAttr值将是从多边形的getBoundingClientRect检索到的值：x、y、width和height

在我使用d3的地方，选择“Invisirect”，这应该也是您的boundingBoxRect。其余的应该可以正常工作

编辑

以下是我用小提琴所做的编辑：

我使用此函数获取多边形的边界框，并相应地设置矩形值：

var bbox = d3.select(polygon).node().getBBox();

var rectAttr = {
    x: bbox.x,
    y: bbox.y,
    width: bbox.width,
    height: bbox.height,
  }; 

---

我很难弄清楚到底在哪里放置过渡以及如何获得正确的数据等。我创建了这个小提琴：请你告诉我如何在那里实现这一点会不会太过分？你想做什么？单击时放大多边形，单击时缩小多边形？是的。基本上如第一个链接所示，我N除了放大状态，我想放大两个多边形中的任何一个，然后点击就能完全缩小。我已经添加了答案。缩放一点也不完美，但它会让你开始：希望这能帮你大忙。这是一个开始，我至少可以最终看到它是如何结合在一起的。非常感谢