List of nodes on the screen

[hyeonbeomsong]

Is there a way to know the list of nodes that exist within the screen of the current graph instance?

For example, you want to remove the labels of invisible nodes according to zoom in/out.

Ultimately, when hundreds and thousands of nodes are rendered, it is difficult to identify node labels when the entire node is initially seen as zoomToFit().
Therefore, we want to show labels for specific nodes based on the property value of the node and the scale value of zoom in/out.
ex) When magnified the most, all the labels of the nodes visible on the screen are visible
ex) In the midpoint enlargement section, certain nodes (depending on the numerical value of node properties) among the nodes visible on the screen

[vasturiano]

@hyeonbeomsong which mode (2D, 3D, VR, AR) are you using? Each of them would have a different way of approaching this.

[hyeonbeomsong]

@vasturiano I am using react-force-graph-2d.

[hyeonbeomsong]

I also worked on a project using the react-force-graph-3d library.

The results have been developed on the main website of Seoul National University Library, which is the best in Korea. https://likesnu.snu.ac.kr/

It was so difficult and hard to develop this.
Now it's my third year as a front-end react developer, a company that analyzes data and visualizes graphs.
I've tried using multiple libraries for graph network visualization, but it's still hard..

Visualization Library Used

• graph
  vis.js , cytoscape.js, ant-g6, force-graph-3d, 2d, ..
• chart
  ant-design-chart, d3, plotly.js, ..

[hyeonbeomsong]

The likesnu webpage serves to obtain information on content (lectures, books, papers) on a specific topic (topic) and provide information to students and users of the Seoul National University library.

Please do the page language conversion ENG and check it out.

Topics page bottom
Which departments have studied this topic?
Discover which departments have studied this topic and explore the co-authorship network.

There is also a visualization.

If you choose a specific book on the Books page
Book Network is visualized.
Recommend books to read before or after reading the book.

Similarly, the Papers page also has a visualization.

Right now, I'm working on visualizing the Courses page as well.

[vasturiano]

@hyeonbeomsong regarding your original question, you can convert any node's coordinates to screen coordinates (using graph2ScreenCoords) and if that turns out to be beyond the boundaries of the canvas in the current zoom state than you know that it is not visible on screen.

Here's a generic example just for illustration:

// assuming access to the graphRef, and the canvas width, height
const isNodeOnScreen = node => {
  const { x, y } = graphRef.current.graph2ScreenCoords(node.x, node.y);
  return x >= 0 && x <= width && y >= 0 && y <= height;
}