Javascript 如何向圆上的半径增加添加过渡效果？

我有下面的代码，允许我在单击圆时增加它的大小。我想添加过渡效果，但它不起作用：

D3.js

HTML/svg

<a class="bubble-node" id="bubble-id-3" style="fill: #62d5f4">
    <circle id="circle-8" r="65"></circle>
</a>

---

我遗漏了什么？

不确定您到底想做什么，但我认为d.id的选择器是错误的 尝试使用这个.id

$(".bubble-node")
.on("click", function (d) {
    $("#circle-" + this.id).transition().duration(1000).attr("r", r);
    d.forceR = r; // forceR is a property on the data object
});

但是，当您连接DOM中不存在“#circle-bubble-id-3”时，id将不匹配。所以，您可能希望将元素的id更改为“8”，然后它将连接到“#circle-8”，从而有效地选择圆对象

---

另外，如果您使用jQuery，我会坚持使用animate（），除非transition（）是您正在使用的插件。

您使用jQuery选择元素，然后使用D3设置元素的动画--D3需要选择。使用d3.select（this）.transition（）…。

$(".bubble-node")
.on("click", function (d) {
    $("#circle-" + this.id).transition().duration(1000).attr("r", r);
    d.forceR = r; // forceR is a property on the data object
});