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.48k stars 803 forks source link

linkThreeObject seem to be created new obj every tick #675

Open longlp-sosene opened 3 months ago

longlp-sosene commented 3 months ago

Is your feature request related to a problem? Please describe.

function handleCreateTextNode() { Graph.nodeThreeObject(node => { console.log('Create text node ...!'); const nodeEl = document.createElement('div'); nodeEl.textContent = node.label; nodeEl.className = 'node-label'; nodeEl.style.maxWidth = '30vw' nodeEl.style.opacity = 0; nodeEl.style.borderWidth = 0.5 nodeEl.style.padding = "4px"; nodeEl.style.borderRadius = "4px"; return new CSS2DObject(nodeEl); }) Graph.linkThreeObject(link => { if(link.relationship_type !== '') { console.log('Create link label'); const nodeEl = document.createElement('div'); nodeEl.textContent = link.relationship_type ?? ''; nodeEl.className = 'node-label'; nodeEl.style.maxWidth = '30vw' nodeEl.style.opacity = 0; return new CSS2DObject(nodeEl); } }) }

It's the same with nodeThreeObject but every time hover a Node and call updateHighlight , the linkThreeObject is recall.

function updateHighlight() { // trigger update of highlighted objects in scene Graph .nodeColor(Graph.nodeColor()) .linkWidth(Graph.linkWidth()) .linkColor(Graph.linkColor()) }

if remove linkWidth & .linkColor it will not recall but can not high light the hover node. Describe the solution you'd like

image