🏠 back to Observable

scale font size when zooming

I have a bubble chart with text. When zooming the text becomes very large. I would like to scale it down as the zoom gets larger.

here is a snippet of the text definition

node.append(“text”)
.attr(“dy”, “.3em”)
.style(“text-anchor”, “middle”)
.style(“font-family”, “sans-serif”)
.style(“font-size”, “10px”)
.style(“pointer-events”, “none”)
//.attr(“transform”, function(d) { textTransform(d);})
.attr(“transform”, function(d) { return “translate(” + d.x + “,” + d.y + “)”;})
.text(function(d) { return d.data.name.substring(0, d.r / 3); });

I was attempting to use the “transform” attribute by changing the anonymous function into a named function textTransform() as below. It is commented out in the snippet above.

function textTransform(d) {
let foo = “translate(” + d.x + “,” + d.y + “)”;
return foo;
}

However when I do that the transform fails???

Can somebody explain why this substitution doesn’t work?

thanks,

Scott

The issue here:
.attr(“transform”, function(d) { textTransform(d);})
it that you are not returning anything in the function body. You would need to change it to
.attr(“transform”, function(d) { return textTransform(d);})
or
.attr(“transform”, d=> textTransform(d))
or I think
.attr(“transform”,textTransform)
would work.

I hope that helps.

2 Likes

Even,

Ah yes, couldn’t be more obvious!

thanks,

Scott