search

vasturiano / 3d-force-graph

3D force-directed graph component using ThreeJS/WebGL
https://vasturiano.github.io/3d-force-graph/example/large-graph/
MIT License
4.67k stars 825 forks source link

Labels of multiple nodes #602

Open nicola-attico opened 1 year ago

nicola-attico commented 1 year ago

Hi, how can I show the labels for multiple nodes of the graph, not just the one I'm hovering on?

G.nodeLabel seems only to set the label, not say when this is displayed.

Thanks, Nicola

vasturiano commented 1 year ago

@nicola-attico please see https://vasturiano.github.io/3d-force-graph/example/text-nodes/

nicola-attico commented 1 year ago

Thanks, @vasturiano. Yes, I saw this one, but I don't see how I can keep the node like appearance (the sphere) and the text as well, like in the native label visualization. How can that be done?

vasturiano commented 1 year ago

@nicola-attico nodeThreeObjectExtend defines whether the custom node object implementation should replace the existing default mode (as in the above example), or simply extend it so you get both.

Essentially you just need to set nodeThreeObjectExtend(true).

huangjian07 commented 5 months ago

@nicola-attico hey，did you kown how to keep the node like appearance (the sphere) already? did you solve the problem?

huangjian07 commented 4 months ago

@nicola-attico hey，you can do like this. it will be okay. .nodeThreeObject((node) => { const geometry = new THREE.SphereGeometry(sphereRadius); const material = new THREE.MeshPhongMaterial(); const nodeSphere = new THREE.Mesh(geometry, material); const label = new SpriteText(node.label); label.material.depthWrite = false; // make sprite background transparent label.textHeight = 2; label.color = '#ffffff'; label.position.set(0, -8, 0); nodeSphere.add(label); return nodeSphere; })