search

Niekes / d3-3d

d3-3d is a powerful JavaScript library designed for 3D visualizations, specifically tailored to work seamlessly with d3.js. This library enables the projection of 3D data onto web browsers, making it an essential tool for developers interested in creating immersive and dynamic visualizations.
BSD 3-Clause "New" or "Revised" License
352 stars 34 forks source link

Zooming & translating (similar to Graph3d from vis.js) #3

Closed jaredvacanti closed 6 years ago

jaredvacanti commented 6 years ago

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.

mbailen commented 6 years ago

I'm interested in this too!

jaredvacanti commented 6 years ago

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?

mbailen commented 6 years ago

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)}))
Niekes commented 6 years ago

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.