Does it allow filter on nodes or links?

[gzboy007]

Dear Author and friends here, I have to say it's so amazing for this framework. I love it so much! Just wondering does it have filtering function on nodes or links? Any guideline I can refer to?

By the way, I couldn't find any tutorial for the framework. It's really appreciate anyone can share it if there's any.

Thank you so much~

[vasturiano]

@gzboy007 thanks for reaching out and for your kind words. Glad you find the module useful!

About the filtering, if you are referring to exclusion from the rendering (while still having the data in your graphData, and taken into account in the graph layout), there are nodeVisibility and linkVisibility accessor props you can use.

If on the other had you wish to completely exclude them from the graph layout, you can just pre-filter the data as you input them into the graph via generic array filter functions. Say, nodes.filter(node => /* your logic */).

[gzboy007]

@vasturiano Thank you so much! It really helps~ For nodeVisibility and linkVisibility accessor props, if there's something like API documents it would be much more helpful. sorry I got in touch with this module several days ago, I'm very new : ) If no this kind of API document, do you think if I learn webGL, the programming language can be used in here?

Previously I used D3 js for such kind of graph visualization. I think maybe this module is better. In D3 js, we need to take care of the network scale by complecated settings, while this module built in everything, we can visualize the network by just writing several rows of codes. In D3 if we visualize more then 1000 nodes, the requestAnimatedFrame will make it slow so I have to swap by using canvas instead of SVG but lost the features of data binding. Also by looking at your example, it provides many excellent approach that make the visulization better. Thank you so much for creating or refining the module. Hope it goes better and better.

[vasturiano]

@gzboy007 yes this is a higher abstraction layer built on top of d3-force and threejs for WebGL manipulation. All levels have their uses depending on your use case and need.

In any case, about the API docs, have you seen the readme on https://github.com/vasturiano/3d-force-graph ?

[gzboy007]

@vasturiano Yes I have checked https://github.com/vasturiano/3d-force-graph. I downloaded all of the example and successfullly deployed at my end. For the API document, it contains description that illustrate the method. However by the description, I still don't know how to use it as I have no idea about WebGL and threejs programming. Maybe after I learnt them, I'll know how it works.

Besides, excuse me if you don't mind my asking. For "nodes.filter", I couldn't find it in API document, I can only find "nodeVisibility" and "linkVisibility". Is there a mothod call "link.filter"? If it doesn't, no problem I can still use "nodeVisibility" and "linkVisibility".

Further more, after studied for a few days, I found that it's not very easy to find the "key connector" which means the nodes are surrounding by many many nodes. We have to span, zoom to see the names on each of them, which is not very convenient. Can we only show the names for those "key connector" by setting a threshold let's say if the nodes connected to 1000 nodes, then show its name on the graph?

Vasturiano, your help is already really helpful. I won't put many questions here before I learnt WebGL and Three.js. I'm trying to buy your a coffee by using credit card. However github seems doesn't accept credit card payment from China. I'm sorry about that.

Anyway, thanks for your time and have a nice weekend. Cheers~

[vasturiano]

By filter I meant the native Javascript array filter method.

Can you clarify what you mean by "key connector"?

[gzboy007]

@vasturiano If a node connects to 10000 nodes, it looks like a ball. This node is the "key connector".

Given that there are too many nodes, we won't show the name on each of them. Normally we only show "key connector"'s name. Because this node is the key entity of what we are going to investigate.

Currently in 3d-force-graph's example, if we need to find the "key connector", we need to span, zoom and mouse over to show its name. It's not very convenient that we need to repeat this action many times to get all of the "key connector".

If when we open the graph, only all of the "key connector"'s name are shown at first sight. It would be more convenient.

[RaulPROP]

There are no methods at this moment to do that automatically, but you can easily achieve the desired effect.

Here is a naive approach.

[gzboy007]

@RaulPROP Wow~cool. Thanks a lot! Thank you so much for working out the example. It's amazing and really helps~