ARTICLE AD BOX
I am working on Vasco Vasturiano’s incredible, indelible 3d-force-graph. I would like to display node attributes in Tweakpane gui (or sidebar, or bounding box), providing info such as description, or node size, which I have supplied in the .json data file:
{ "label": "Interdisciplinary research", "x": 1072.099365234375, "y": -498.5552673339844, "id": "Interdisciplinary research", "description:” “Short description here", "type": "keywords", "attributes": { "Node Color Multimode": "blue", "Modularity Class": "9", "Weighted In-Degree": "3.0", "Clustering Coefficient": "0.0", "Weighted Degree": "3.0", "Number of triangles": "0", "Weighted Out-Degree": "0.0" }, "color": "rgb(0,189,148)", "size": 33.68421173095703 },At the moment, I have only managed to create onNodeHover Hover-over text: “Short description here”.
How can I create a callback function for a GUI (or sidebar, or bounding box?), to display the attributes of each node I click? I would like these attributes to be visible as a passive display onNodeClick (potentially, with all the neighbouring links and nodes, like on a sidebar information pane), as seen, for example, here.
I'm stuck at the very basics, and the problem seems insuperable, unsurmountable. This is the Tweakpane Gui code:
const pane = new Pane(); const folder = pane.addFolder({ title: 'Settings', expanded: false }); const PARAMS = { name: 123, label: 'hello', id: '#ff0055', }; pane.addBinding(PARAMS, 'name'); pane.addBinding(PARAMS, 'label'); pane.addBinding(PARAMS, 'id'); const binding = pane.addBinding(PARAMS, 'count'); binding.on('change', (ev) => { console.log(`Value changed: ${ev.value}`); if (ev.last) { console.log('Final change'); } });The full visualization can be accessed here, and the code can be seen here.
Please note, I already have already a function associated with the onNodeClick, which zooms in and recenters the node, so I will also need to combine this action with an attribute display, or whatever the callback function may be.
.onNodeClick(node => { // Aim at node from outside it const distance = 40; const distRatio = 1 + distance/Math.hypot(node.x, node.y, node.z); const newPos = node.x || node.y || node.z ? { x: node.x * distRatio, y: node.y * distRatio, z: node.z * distRatio } : { x: 0, y: 0, z: distance }; // special case if node is in (0,0,0)Thank you for your feedback!
