How can I add a transition effect to a radius increase on a circle?

Question

I have the following code that allows me to increase the size of a circle when it is clicked. I want to add a transition effect, but it isn't working:

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>

What am I missing?

Answer 1

not sure exactly you're trying to do but i think the selector is wrong for d.id try using 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
});

but then the id would not match up when you concatenate "#circle-bubble-id-3" doesn't exist in the DOM. So you might want to change the id of the A element to "8" then it would concatenate to "#circle-8" effectively selecting your circle object.

Also if you're using jQuery I would stick with animate() unless transition() is a plugin you're using.