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

Question

我有以下代码，可让我在单击圆圈时增加它的大小。 我想添加转场效果，但是不起作用：

D3.js

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

HTML / svg

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

我想念什么？

Answer 1

不确定您到底要尝试执行什么操作，但我认为d.id选择器有误，请尝试使用this.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将不匹配。 因此，您可能希望将A元素的ID更改为“ 8”，然后将其串联为“＃circle-8”，以有效地选择您的圆形对象。

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