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
});

但是当你连接时，id就不会匹配＆＃34;＃circle-bubble-id-3＆＃34;在DOM中不存在。因此，您可能希望将A元素的ID更改为＆＃34; 8＆＃34;然后它会连接到＆＃34;＃circle-8＆＃34;有效地选择你的圆形物体。

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

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

1 个答案: