Javascript 将元素放在svg的中心

我在D3.js中得到了这个svg，大小为（10001000），在svg上的某个随机位置有一个圆圈，例如（100200）

现在，我想以某种方式移动我的svg，即圆圈位于svg的中间/中心，即（500500）。但我想用一个函数来解它，它允许我对每个随机定位的圆都这样做

有人能帮忙吗？svg的左上角点当前位于（0,0）。因此，当使用

.attr（“transform”、“translate（10,10）”）移动时，然后SVG的左上角点位于（10,10）。我还考虑使用质心函数，如本例所示：

但我不知道这是否只适用于世界地图

var svg = d3.select("body").append("svg:svg") 
    .attr("width", 1000)
    .attr("height", 1000);

function move(){
    svg.transition()
        .duration(750)
        .attr("transform", "translate(0,0)");
}

正如在评论中提到的，这可能不是你想要的，但在我看来，这是最简单、最干净的方法：移动圆圈。或者，如果有几个圆，移动它们的容器，即
元素

翻译小组的数学很简单：

.attr("transform", "translate(" + (w/2 - pX) + "," + (h/2 - pY) + ")")

其中，
w
是SVG的宽度，
h
是高度，
pX
是圆的
x
坐标，
pY
是圆的
y
坐标

这里是一个简单的演示。我生成20个圆圈，每2秒，我选择一个圆圈（按顺序），以红色突出显示，并转换整个组以使该圆圈居中：


var svg=d3.选择（“svg”）；
var g=svg.append（“g”）
var circles=g.selectAll（空）
.data（d3.range（20）.map（function（）{
返回{
x:Math.random（）*500，
y:Math.random（）*300
}
}))
.输入（）
.附加（“圆圈”）
.attr（“cx”，功能（d）{
返回d.x
})
.attr（“cy”，函数（d）{
返回d.y
})
.attr（“r”，10）
.样式（“填充物”、“石灰”）；
var计数器=0；
var timer=d3.interval（函数（）{
如果（计数器==19）{
计时器停止（）
}
var thisCircle=circles.filter（函数（d，i）{
返回i==计数器；
});
变量位置=此圆。基准（）；
g、 过渡（）
.持续时间（1500）
.attr（“变换”、“平移”（+（250-position.x）+）、“+（150-position.y）+”）；
这个圆圈。样式（“笔划”，“红色”）。样式（“笔划宽度”，4）
.transition（）
.延迟（2000年）
.持续时间（0）
.style（“笔划”、“无”）
计数器++；
}，2000）
svg{
边框：1px纯色灰色；
}

您可以分享您的标记和svg代码吗？为什么不移动圆圈呢？因为在scrren上有很多圆圈，我认为最好移动svg；）这仍然没有意义：如果因为有几个圆而要移动SVG，那么哪个圆将位于中心？这和移动圆有什么不同？如果你有很多圆，移动这些圆，那么它们可以重叠，我想避免这种情况。例如，我想点击一个圆圈，svg就会移动到那里，就像Mike Bostock的例子：非常好，谢谢！你能解释一下这句话吗
var thiscirle=circles.filter（函数（d，i）{returni==counter；}）我用它来选择一个圆圈，按升序排列。并且
var position=thiscirle.datum（）提供圆的（x，y）坐标？难道没有将数据绑定到DOM元素的
data（）
吗？它只是一个元素，因此
datum
。