niekes / d3-3d Goto Github PK

Hey! Nice library.

I took one of your examples and made a reusable library out of it.

It takes a bunch of [x,y,z] coordinates, and optionally a base coordinate and renders the points in 3d space. Clone It!

I am trying have the graph animate a rotation about the Z axis -- however it seems that whenever I do that -- the data gets warped! I believe there may be an issue with how the rotateZ() method works on shapes.

I have a TODO in the animate method of the main class -- if you comment that in you can see the output. Any ideas what may be causing this?

Just started playing with your code. It's great. Is there a simple way to add ellipses (ovals) with what you have? I was thinking of adding a new "draw" type?

Thanks!

For example， in the 3d barchart ，can I add a horizontal plane across all the bars ，and when I select the plane , I can drag it up and down across the bars and the bars are fixed?

Hi, I love this library.
Is it possible to add curves (quadratic and/or cubic) to this?
Where should I should start if I would add it by myself?

Best regards

Pardon for opening a question here. Let me know if you'd rather me use StackOverflow.

How would you suggest to start going about adding axes to the visualization?

drag to move origin in Browser but do not want to move rotateCenter in viewport. How?

how can i use d3-3d in vue?

The example https://bl.ocks.org/niekes/ff4d3c8497d8436d4d8fdb9f0121d12d uses the function .primitiveType('LINES'); This function is not in the current release of d3-3d.js downloaded from https://github.com/Niekes/d3-3d/releases version 0.0.9 .

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.

Hi, i'm using your library to create a surface with axes. I simply mixed up your examples of the scatterplot and 3d surface, and everything works fine. I then tried to create a "rectangular" surface/grid with some rows and points per row (N of points per row != N of rows), but failed. I was just wondering if it was possible to create a rectangular grid.

EDIT: i noticed that when you create and render a plane with Nrows > N points per row, the code just breaks, while the vice-versa creates a distoted plane. You can try it by modifying your 3d surface plot parameters.

Your example

I tried passing the points as shown in the triangle example. But not able to draw a cylinder. Can you please help

Similar to how you create the cube bar chart, is it possible to create one with hexagons instead of cubes?

If a cube requires 4 vertices and 8 planes, I'm thinking a hexagon would need 6 vertices and 12 planes...

Hi! First of all, thank you for the amazing lib! It's the perfect companion for D3.

I've been using the latter in an Angular 6 project and it has its Typings available at:

npm install --save-dev @types/d3

Now, it's time to turn my charts into 3D. 📈 Is there a way to obtain Typings for D3-3D also?

Thanks in advance!

Dear Stefan,

great package. Got this error though: Any way to fix it? (locally if needed)

C:******\myapp\node_modules\d3-3d\index.js:5
export { default as _3d } from './src/3d.js';
^^^^^^

SyntaxError: Unexpected token 'export'
at internalCompileFunction (node:internal/vm:73:18)
at wrapSafe (node:internal/modules/cjs/loader:1176:20)
at Module._compile (node:internal/modules/cjs/loader:1218:27)
at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
at Module.load (node:internal/modules/cjs/loader:1117:32)
at Module._load (node:internal/modules/cjs/loader:958:12)
at ModuleWrap. (node:internal/modules/esm/translators:169:29)
at ModuleJob.run (node:internal/modules/esm/module_job:194:25

c58f691

Hi,
I have been playing around with your package, and I've been getting some errors when displaying the data, and everything seems to point to the direction that, when you built this library, your (x,y,z) coordinate system does not follow the right hand rule.

Can you confirm that you built this without accounting for the right hand rule?
Thanks

Hi,
I'm using this library and it is doing wonders for us.
Currently I am able to show two states on our 3D scatter plot by showing and hiding two separate collections of dots, something like this:

dots1.push({x: x1, y: y1, z: z1});
dots2.push({x: x2, y: y2, z: z2});

...
function dragged(){
        ...
        var data = [
           grid3d.rotateY(beta + startAngle).rotateX(alpha - startAngle)(xGrid),
           point3d.rotateY(beta + startAngle).rotateX(alpha - startAngle)(mode ? dots1 : dots2)
       ];
       processData(data, 0);
}
toggle.onClick = dragged;

I would like to animate dots moving between the two states.

As I understand it, d3-3d calculates d.projected.x and d.projected.y for all of the data, and then cx and cy are set to draw as if it's in 3d space.

To draw cx and cy during a transition, I'd like to access x2,y2,x2, either as d.projected.x2, or projected(d.x2). Is there a clean way like this, without maintaining both sets and checking the others' calculated position, with something like dots2.filter((d2)=> { d2.id === d.id })[0].projected.x ?

Hi,

How does one use this to make an area chart ? I am having trouble figuring this out.

Example wireframe cannot be made thru unpkg js lib

Link of example section : WireFrame Cube

@Niekes Is it possible to get the 3D points if we have the 2D coordinates similar to what the d3.scale.invert does. An application of this would be to be able to identify the point a user clicks. Sorry for directly tagging.

I want to select points on the 3d scatter plot just the way we do it in 2d scatter using d3 brush.

hi,
i draw d3 3d scatter plot and how to draw x y z axis??
thanks a lot!