Closed jaredvacanti closed 6 years ago
I'm interested in this too!
Actually, would this not be an adjustment to the d3-3d package itself, and only adding appropriate d3 handlers?
Using the 3D Cubes as an example:
var cubes3D = d3._3d()
.shape('CUBE')
.x(function(d){ return d.x; })
.y(function(d){ return d.y; })
.z(function(d){ return d.z; })
.rotateY( startAngle)
.rotateX(-startAngle)
.origin(origin)
.scale(scale);
Would adjusting .origin().scale()
on another d3 handler be enough? It looks like drag is registered to the svg
object in this example, but adding ctl-drag
& 3 finger drag
to change the origin & zoom
/2-finger zoom
for adjusting scale? Am I actually "underthinking" this?
Yeah, you're on the right track. I just got this going. Add another call onto your SVG and it works.
.call(d3.zoom().on("zoom", function () {svg.attr("transform", d3.event.transform)}))
Hey, @jaredvacanti is right. You can achieve translating by just manipulating the data. For instance just add the mouse-x value to the data. d3 and d3-3d will take care of it.
I highly recommend taking a look at this example: https://bl.ocks.org/mbostock/2b534b091d80a8de39219dd076b316cd.
I will close this issue.
Great project. Very succinct and accomplishes goals that were difficult before without large external packages.
Is there an easy way to incorporate a scale & a translate function to the examples? Something similar to this (http://visjs.org/graph3d_examples.html) - scale on scroll (or pinch zoom) and translate on click-drag.
I wanted to check with you first how you imagined it going or if you have something in the works before I attempt to incorporate a solution. Or maybe you have an idea of how you'd like it to work with a larger goal in mind.
Thanks.