Challenges encountered during the updating of nodes in 3D force graphs

Question

Challenges encountered during the updating of nodes in 3D force graphs

I am currently developing an application where users can utilize a dat.gui menu to customize their Three.js animation. Specifically, I am implementing the 3d-force-graph library.

Whenever a user makes a change, the following steps are taken:

Swap out the old .json file used for their animation with the new one required to display their selection.
Execute a function called vertexControl that adjusts the nodes of their new animation (e.g., changing node colors).

Here's a simple example:

const settings = {
    num : 5,
}
const gui = new dat.GUI();
gui.add(settings, 'num', 1, 10).step(1).onChange( function update(n) { 
    Graph.jsonUrl('new_json'+ n.toString() +'.json'); //built-in method of 3d-force-graph for updating the .json file
    vertexControl() //Once Graph is updated, adjust the vertices
}

The issue: The vertexControl function runs before the Graph object is updated with the new .json file. Consequently, the desired changes to the nodes do not take effect.

Attempted solutions: I have tried using the .refresh() method provided by 3d-force-graph, but it doesn't seem to work in my scenario. Additionally, I experimented with callbacks and other approaches from StackOverflow discussions related to executing functions sequentially. Unfortunately, these methods were unsuccessful. Resorting to a cumbersome setTimeout workaround to guess when the Graph is updated works, but it seems impractical for such a basic task. There must be a more logical way to achieve this, right?

javascript d3.js three.js

Answer 1

Answer №1

One issue arises because the function Graph.jsonUrl() needs to asynchronously load the JSON, while vertexControl() is executed immediately before the JSON has completed loading. The force-graph documentation does not offer a built-in solution for handling callbacks upon JSON completion. One workaround could involve manually loading the JSON using THREE.FileLoader in order to trigger a custom callback after the file has finished loading:

// Utilize FileLoader to independently load JSON files
var fileLoader = new THREE.FileLoader();
const settings = {
    num : 5,
}
const gui = new dat.GUI();
gui.add(settings, 'num', 1, 10).step(1).onChange( function update(n) {
    fileLoader.load(
        'new_json'+ n.toString() +'.json',

        // Execute callback once JSON loading is complete
        function(response) {
            // Parse response text into a JSON object
            const newData = JSON.parse(response);

            // Send resulting object to the Graph
            Graph.graphData(newData);   

            // Proceed with VertexControl functionality
            vertexControl();
        }
    );
}

The first parameter of fileLoader.load is the file path, while the second parameter designates the callback function to execute AFTER the file finishes loading. This approach allows you to update your graph data and then call vertexControl immediately without any delays.

Answer 2

One issue arises because the function Graph.jsonUrl() needs to asynchronously load the JSON, while vertexControl() is executed immediately before the JSON has completed loading. The force-graph documentation does not offer a built-in solution for handling callbacks upon JSON completion. One workaround could involve manually loading the JSON using THREE.FileLoader in order to trigger a custom callback after the file has finished loading:

// Utilize FileLoader to independently load JSON files
var fileLoader = new THREE.FileLoader();
const settings = {
    num : 5,
}
const gui = new dat.GUI();
gui.add(settings, 'num', 1, 10).step(1).onChange( function update(n) {
    fileLoader.load(
        'new_json'+ n.toString() +'.json',

        // Execute callback once JSON loading is complete
        function(response) {
            // Parse response text into a JSON object
            const newData = JSON.parse(response);

            // Send resulting object to the Graph
            Graph.graphData(newData);   

            // Proceed with VertexControl functionality
            vertexControl();
        }
    );
}

The first parameter of fileLoader.load is the file path, while the second parameter designates the callback function to execute AFTER the file finishes loading. This approach allows you to update your graph data and then call vertexControl immediately without any delays.

Challenges encountered during the updating of nodes in 3D force graphs

Answer №1

Similar questions

rails failing to establish connection between dynamically added nested form and its parent

Confirmation message is displayed upon clicking to delete a row in the editable Gridview, prompting the user to

There seems to be an issue with the Ajax call as it is returning a null

The vertical scrolling feature seems to be disabled for ng-repeat within the Angular view

MUI: Interaction with a button inside a MenuItem when not interacted with MenuItem itself?

The button event is currently only targeting the initial class. (Jquery)

Issue with updating input value during keyup event in Android Chrome specifically

Executing a SQL function in a JavaScript file using ASP.NET C# - here's how!

What is the process for loading a .x model in Three.js?

Show the item in the menu with a label that has either subscript or superscript styling

Objective: Remove all soft items from array stored in MongoDb using Mongoose

Guide to showcasing images dynamically within a table

jQuery failing to trigger onClick event for a specific group of buttons

Establish a connection to the Socket.IO server using a designated path and namespace

Encircle the text within intersecting divs

JavaScript encountered an issue as it attempted to reference the variable "button" which was

Utilize Ajax to prevent the display of additional modals when encountering errors in the form data

There is a single occurrence that happens when you click on a label alongside an

Storing an image or video file to the disk of a NodeJS server and creating a reference in MongoDB

Issue with PeerJs Localhost Setup