score:0

Accepted answer

If i understood your problem correctly, you need to add it to your zoom behaviour.

//Zoom functionality
  function zoomed() {
const currentTransform = d3.event.transform;
g.attr("transform", currentTransform);
}

here, you are applying your transformation to the elements, which is fine. However, you're not applying any logic to the radius. That logic is up to you to make, and it will depend on the k property of the transform event (currentTransform.k). I will use a some dummy logic for your radius. Your scale extent is between 1 and 10, you need a logic in which the radius decreases as the zoom increases (bigger k). It is also important that your radius doesn't go lower than 1, because the area of the circle will decrease much faster (remember the area depends on r^2, and r^2 < r for r < 1) So my logic will be: the radius is 2.1 - (k / 10). Again, I'm oversimplifying, you can change it or tune it for your specific case.

In the end, it should look something like this:

//Zoom functionality
  function zoomed() {
const currentTransform = d3.event.transform;
g.attr("transform", currentTransform);

g.selectAll("circle")
     .attr("r", 2.1 - (currentTransform.k / 10))
}

I haven't tested the code, but tell me if this works! Maybe you can add it to a jsfiddle if needed


Related Query