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.72k stars 828 forks source link

Get the coordinate information of the node #251

Open gf0604 opened 4 years ago

gf0604 commented 4 years ago

If my data is dynamic, how to get the node's coordinate information x, y, z. Or force-graph how to calculates the coordinates of each node in the render node.

RaulPROP commented 4 years ago

If my data is dynamic, how to get the node's coordinate information x, y, z.

You can access the data by doing: let data = graph.graphData(); Then the nodes with: let nodes = data.nodes Then, every nodes has its coordinates in the attributes x, y and z

let x = nodes[node_index].x
let y = nodes[node_index].y
let z = nodes[node_index].z

Or force-graph how to calculates the coordinates of each node in the render node.

I don't understand your question.

Alexithemia commented 4 years ago

The data that is passed into the graph is edited as it is graphed. RaulPROP's answer works but you don't have to pull it into a new variable for that.

So if

graphData = {
  nodes = [{...}, {...}],
  links = [{...}, {...}]
}

graph.graphData(graphData);

The graphData object will be edited, so all the graphData.nodes will have x,y,z on them after being graphed.

RachelCT1 commented 3 years ago

I want to get the graphed nodes' coordinate, but I use RaulPROP's answer, and I get undefined. const Graph = ForceGraph3D() .graphData(graph) .d3Force('center',force3D.forceCenter()); console.log(Graph.graphData().nodes[1].x) If I print the nodes set, I can see the x, y, z coordinate, but I can't fetch them out (please see image). I don't understand what's the problem, is that really you can get the coordinate by this way? image

madebyjujube commented 6 months ago

Hello, I am wondering if this was ever resolved? I have the same question regarding getting the xyz position of each nodes for every tick.

import SpriteText from "//unpkg.com/three-spritetext/dist/three-spritetext.mjs"; 
// im using SpriteText instead of circle nodes. 

const Graph = ForceGraph3D();

Graph(document.getElementById('3d-graph'))
    .jsonUrl('../datasets/miserables.json')

    .nodeThreeObject(node => {

        const sprite = new SpriteText(node.id);

        console.log(sprite.position); 
        // here I can log the position of each sprite but only at instanciation. 
        // (I need it every frame or tick and outside this function, and method ultimately.)_ 

        sprite.material.depthWrite = false;
        sprite.color = '#90F';
        sprite.fontFace = 'Helvetica';
        sprite.textHeight = 16;
        return sprite;
    })

Graph.d3Force('charge').strength(-500);
Graph.d3Force('link').distance(100);
Graph.d3Force('center').x(w => w.width / 2).y(h => h.height / 2);

I try to log Graph.graphData().nodes and it returns an array that just has length:

[
    length: 0,
    [[Prototype]]:Array(0)...
]

I also tried console.log(Graph.d3Force('center').x()); and I get NaN

Apologies for begginer level question, Ive been trying to dig into the source code to understand better how it all works but its been tough. Please help! I wish to use the xyz data from all nodes in real-time so I can manipulate audio with the data. thanks. juju

madebyjujube commented 6 months ago

Fixed may crash your browser!

graphInstance.onEngineTick(() => {
     // Access and log positions of nodes
     graphInstance.graphData().nodes.forEach(node => {
         console.log(`Node ${node.id}: x = ${node.x}, y = ${node.y}, z = ${node.z}`);
     });
});

spammed chatgpt and got it to give me something that works. Hope this helps anyone!