I am an absolute javascript noob and am trying to implement a zoom functionality on a d3-3d scatterplot (which is largely based off of this example). I want the functionality to be able to zoom into overlapping, dense areas of points and inspect them with higher resolution. Currently, when zoomed, the size of the points and the text simply enlarges, not allowing for the desired higher resolution.
I am looking for some information on how to zoom and allow the scale to update with it, but no tutorials I am finding online are working out for me.
My code is available here:
https://jsfiddle.net/CKCMathCS613/n0p7gay3/
Currently the zoom is encapsulated into a zoomed function at the bottom of the script, but can be summarized with this simple call to d3.zoomTransform():
var svg = d3.select('svg').call(d3.zoom().on("zoom", function (){ svg.attr("transform", d3.zoomTransform(this))})).append('g');
I have tried so many things - from updating the scale using the d3.event.transform.k variable to hard coding the circle's r and text's dx attributes. But nothing works right.
I love how this example zooms: https://observablehq.com/@d3/zoom-canvas-rescaled but I cannot for the life of me incorporate their code into mine and get it to work.
After a couple days of banging my head against the wall, I'm hoping there is an easy solution to this one. Thanks in advance!
EDIT: The jsfiddle has now been updated to a correct implementation of the problem, with correct scaling with zoom and rotation.