Javascript 从中心缩放矩形元素

我目前正在使用

rect

元素作为地图上的点，我想缩放它们的大小，但D3动画总是从左上角开始设置宽度/高度变化的动画。是否有一种方法可以从中心点缩放矩形，使其在设置动画时向所有方向展开

这是简单的D3代码。它正在为宽度、高度rx和ry的更改设置动画

.selectAll(".anchor")
    .transition()
    .duration(800)
    .delay(function (d, i) {
        return i * 50;
    })
    .attr("fill", _graphics.colors.red)
    .attr("stroke", _graphics.colors.charcoal)
    .attr("width", 10)
    .attr("rx", function (d) {
        return 10 / 2
    })
    .attr("ry", function (d) {
        return 10 / 2
    });

---

您可以使用所有参数（

x

，

y

，

width

，

height

）。如果

宽度

应增加

100

，则将

x

减少

100/2=50

将使矩形从其中心开始增长：

var svg=d3.select（“body”）.append（“svg”）
.attr（“宽度”，700）
.attr（“高度”，400）；
风险值数据=[
{x:50，y:50，宽：25，高：50}，
{x:180，y:65，宽：40，高：20}
];
svg.selectAll（“rect”）
.数据（数据）
.输入（）
.append（“rect”）
.attr（“x”，函数（d）{return d.x；}）
.attr（“y”，函数（d）{返回d.y；}）
.attr（“宽度”，函数（d）{返回d.width；}）
.attr（“height”，函数（d）{返回d.height；}）
.style（“填充”、“蓝色”）
.transition（）
.持续时间（3000）
.attr（“x”，函数（d）{返回d.x-25；}）
.attr（“y”，函数（d）{返回d.y-50；}）
.attr（“宽度”，函数（d）{返回d.width+50；}）
.attr（“height”，函数（d）{返回d.height+100；}）
为了完整起见，您只需使用
转换
属性中的
缩放

您所需要做的就是在缩放时平移一半的宽度和高度。因此，从中借用代码，您只需：

"translate(" + (-(d.x + d.width / 2) * (factor - 1)) + 
    "," + (-(d.y + d.height / 2) * (factor - 1)) + ") scale(" + factor + ")"

以下是使用
transform
属性和
3
作为因子的替代版本：


var svg=d3.select（“body”）.append（“svg”）
.attr（“宽度”，700）
.attr（“高度”，400）；
风险值数据=[{
x:50，
y:50，
宽度：25，
身高：50
},
{
x:180，
y:65，
宽度：40，
身高：20
}
];
var因子=3；
svg.selectAll（“rect”）
.数据（数据）
.输入（）
.append（“rect”）
.attr（“x”，函数（d）{
返回d.x；
})
.attr（“y”，函数（d）{
返回d.y；
})
.attr（“宽度”，函数（d）{
返回d.width；
})
.attr（“高度”，功能（d）{
返回d.高度；
})
.style（“填充”、“蓝色”）
.transition（）
.持续时间（3000）
.attr（“转换”，函数（d）{
返回“平移（“+（（d.x+d.width/2）*（因子-1））+”，“+（（d.y+d.height/2）*（因子-1））+”）比例（“+因子+”）
});