D3.js 缩放SVG坐标，但不缩放元素

我有一堆

元素，我想放大它们

我想从这里开始：

为此：

请注意，我并没有放大圆，只是放大它们之间的距离

我怎样才能有效地做到这一点？我现在要做的是在每个圆上分别设置

cx

和

cy

坐标。这是可行的，但当我有数千个圆圈时，速度很慢

我可以把它们都放在一个

中，并用

变换：scale（x）来缩放它们。这要快得多，但它将缩放距离和圆的大小

有没有办法独立于圆半径来缩放坐标？例如，我可以以相对于屏幕大小的单位指定圆半径吗

我正在使用d3，但任何解决方案都值得赞赏。
IMO最简单的方法是使用带有圆形端盖的零长度线来形成圆。您可以使用
笔划宽度设置其直径。然后可以使用
矢量效果：非缩放笔划
来防止它们在放大SVG时缩放


大多数现代浏览器都支持向量效果


svg{
背景色：黑色；
}
路径{
填充：无；
冲程：#ccc；
笔画宽度：5；
笔划线头：圆形；
矢量效果：非缩放笔划；
}
路径：第n个子（3）{
笔画：李子；
}
IMO最简单的方法是使用带有圆形端盖的零长线来形成圆。您可以使用
笔划宽度设置其直径。然后可以使用
矢量效果：非缩放笔划
来防止它们在放大SVG时缩放


大多数现代浏览器都支持向量效果


svg{
背景色：黑色；
}
路径{
填充：无；
冲程：#ccc；
笔画宽度：5；
笔划线头：圆形；
矢量效果：非缩放笔划；
}
路径：第n个子（3）{
笔画：李子；
}

当你说“我想放大它们”时，你是在使用d3.zoom
还是仅仅是一个表达式？我在使用d3.zoom
，但d3.zoom

只是设置cx和cy以及每个圆。因此，我认为这实际上与d3关系不大，但更多的是关于浏览器中SVG的功能。顺便说一句，我已经切换到使用

transform:scale（x）

缩放

g

，然后在每个

圆圈上缩放
r
。这加快了速度，因为我现在只做了一半的工作——我只设置了一个属性（r），而不是两个（cx，cy）。尽管如此，我还是在每帧设置数千个属性，所以当你说“我想放大它们”时，最好能找到更好的方法。你使用的是
d3.zoom
还是仅仅是一个表达式？我使用的是
d3.zoom
，但是
d3.zoom
只是设置
cx
和
cy
以及每个圆。因此，我认为这实际上与d3关系不大，但更多的是关于浏览器中SVG的功能。顺便说一句，我已经切换到使用
transform:scale（x）
缩放
g
，然后在每个
圆圈上缩放
r
。这加快了速度，因为我现在只做了一半的工作——我只设置了一个属性（r），而不是两个（cx，cy）。尽管如此，我仍在为每一帧设置数千个属性，因此如果能找到更好的方法来实现这一点，那就太好了！具有圆端的0长度线。。。现在，这是在（视图）框之外思考；*）这是一个很好的答案，非常聪明，得票上等。。。但是有一个但是：我看到那些“圆圈”被放大了。在Safari/OS X中，较小的是6px X 6px，而较大的是10px X 10px。实现差异？是的！这正是我希望有人能想出的诡计。只要我使用viewBox属性（而不是transform:scale（n））进行缩放，这似乎完全符合我的要求。感谢@GerardoFurtado的报告。如果这在Safari中不起作用，它实际上可能会破坏交易：（@Sasha，这是SVG2的一个建议新值。我可能错了，但我不相信还有任何浏览器支持新值（即除
非缩放笔划
）哈！0长度的圆端线条…现在这是（视图）框之外的想法；*）这是一个很好的答案，非常聪明，上乘等等。。。但是有一个但是：我看到那些“圆圈”被放大了。在Safari/OS X中，较小的是6px X 6px，而较大的是10px X 10px。实现差异？是的！这正是我希望有人能想出的诡计。只要我使用viewBox属性（而不是transform:scale（n））进行缩放，这似乎完全符合我的要求。感谢@GerardoFurtado的报告。如果这在Safari中不起作用，它实际上可能会破坏交易：（@Sasha这是SVG2的一个建议新值。我可能错了，但我认为还没有任何浏览器支持新值（即除
非缩放笔划
）