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

Question

我试图弄清楚如何执行与下面示例所示相同的缩放行为，但使用普通多边形而不是地理路径。

https://bl.ocks.org/mbostock/4699541

我在这里看到了一些关于解决这个问题的答案，但动画很不稳定或奇怪地跳跃。

我的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>

我希望能够在与 map 矩形相同的组中添加一些多边形，然后放大多边形的边界。谁能告诉我这种行为的 fiddle 吗？

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

Answer 1

也许这会对你有帮助。我今天早些时候在这里回答了一个问题:D3js outer limits

这是我整理的 fiddle :http://jsfiddle.net/thatOneGuy/JnNwu/921/

我添加了一个过渡:svg.transition().duration(1000).attr('transform',function(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、宽度和高度.

在我使用d3.select('#invisRect')的地方，这也应该是您的boundingBoxRect()。其余的应该就可以了。

编辑

以下是我使用提供的 fiddle 所做的编辑:http://jsfiddle.net/thatOneGuy/nzt39dym/3/

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

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

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