如何在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>

我希望能够在与地图矩形相同的组中添加一些多边形，然后放大该多边形的边界。 谁能给我看看这种行为的小提琴吗？

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

Answer 1

也许这会对您有所帮助。 我今天早些时候在这里回答了一个问题： D3js的外部限制

这是我整理的小提琴： 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, width and height 。

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

编辑

这是我用小提琴提供的编辑内容： 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,
  };