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 outer limits

这是我放在一起的小提琴：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,
  };

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

1 个答案: