Javascript 通过单击按钮逐步增加元素的大小

我在D3.js中有一个小圆圈

现在，我可以创建一个按钮，并且可以通过单击按钮来增加圆的大小。问题是，我只能更改我编写的一个定义大小

var button.on("click", function(d){ circle.style("r", 6); });

---

但我的想法是，每次点击按钮时，以小步的方式增加圆圈的大小。我在考虑使用for循环，但我不确定在D3.js中使用循环是否是一个好主意。

for循环不是适合此工作的解决方案，无论您使用D3还是其他任何东西。最简单的方法可能是在单击按钮时读取实际值，根据需要增加值并相应地设置新值：

d3.select("button").on("click", function() { 
  circle.attr("r", +circle.attr("r") + 6);                  // unbounded
  //circle.attr("r", Math.min(+circle.attr("r") + 6, 20));  // capped to 20
});

嵌套的

circle.attr（“r”）

返回实际为圆设置的值（注意，这将生成一个字符串，因此前面的

+

运算符将其转换为数字）。将

6

添加到此值后，外部

圆圈.attr（）将设置新的较大值

请看这个工作示例：


var circle=d3.选择（“svg”）
.附加（“圆圈”）
.attr（“cx”，100）
.attr（“cy”，100）
.attr（“r”，6）；
d3.选择（“按钮”）。在（“单击”）上，函数（{
circle.attr（“r”），+circle.attr（“r”）+6）；//无界
//circle.attr（“r”，Math.min（+circle.attr（“r”）+6,20））；//上限为20
});

展开圆
为什么不保留一个计数器，并在每次单击时增加它，并依赖于它的半径？非常感谢！有没有可能给它一个最大尺寸？使用循环不会有问题，但如果不使用循环，您如何说：如果您达到大小20，您可以继续单击，但没有效果？@DerickKolln当然，您可以使用标准的
Math.min（）
函数来实现此目的。看看我的更新，它显示了一种设置值上限的方法。这真是难以置信！谢谢你！我还有最后一个问题。例如，我如何为该示例添加测量工具？比如，每次半径上升/下降，测量值也会上升/下降？@Derick，在S.O.这里，在评论上链接问题是不受欢迎的。你为什么不打开一个新的帖子/问题？它是免费的@杰拉尔多：谢谢你的提示！我肯定能做到