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

Is it possible to get the 3D points if we have the 2D co-ordinates? #27

Closed Ravikanth-Koravenibh closed 1 week ago

Ravikanth-Koravenibh commented 7 months ago

@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.

Niekes commented 7 months ago

@Ravikanth-Koravenibh Can you give an example of the input and expected output of the data?

Ravikanth-Koravenibh commented 4 months ago

Hi @Niekes , sorry for the very delayed response got busy in some other items. example lets assume i have created a scatterplot similar to the example here https://codepen.io/Niekes/pen/poGMpLw but i want to add a ability to click on any point on the plot to display more info on that point in a different component on UI. lets think that might be image the orange point near 8 in the above image. By binding the click event to svg i will be able to get the co-ordinates of that point. But to get the actual value of that point if this is a plain d3 plot i can use the d3.scale.invert(corresponding co-ordinate) to get the value. which I can use to identify the data point from my data array and get the respective details and show on the other component. For example in the added picture to get the correct y value of the orange point i can click on it to get the co-ordinate and pass to the invert yscale3d.invert(co-ordinate)~=8 similar i can do for X. Similar to this https://d3js.org/d3-scale/linear#linear_invert https://d3js.org/d3-selection/events#pointer So basically, ability for the user to get the actual data value of a co-ordinate value that we can get from events like click

DevangBarot-BH commented 4 months ago

also looking into similar issue, @Niekes @Ravikanth-Koravenibh any findings on the same ?

Niekes commented 3 months ago

Hi @Ravikanth-Koravenibh,

I am not sure if I understand your problem correctly. d3-3d.js only works if you give it real 3d data and you have always access to that data. Just add .on("click", (event, d) => console.log(d)) at line 93 before .merge(points) and click on a point. Than you get all available data.

is that what you are looking for?