Utilizing the Javascript Infovis Toolkit as an external library to create graphs and trees, I am faced with the challenge of modifying the onClick method for nodes in order to send an HTTP GET request to the server asynchronously. The goal is to assign the fetched data to properties and variables within an Angular service class. Despite using webpack to bundle all compiled TypeScript files into a single JavaScript file, the resulting output is complex and hard to navigate. This makes calling a function from an external JavaScript library on the compiled js file not the most optimal solution.
I attempted the following approach within my Angular service to easily access its properties:
document.addEventListener('DOMContentLoaded', function () {
var nodes = document.querySelectorAll(".nodes"); // nodes = []
for (var i = 0; i < nodes.length; i++) { // nodes.length = 0
nodes[i].addEventListener("click", function () {
// asynchronously sending GET request to the server
// and assigning received data to the properties of this Angular service
});
}
});However, this method proves ineffective as in Javascript Infovis Toolkit, the nodes are rendered after the DOM has completed rendering, even after the window.onload event. The library includes lifecycle methods like onAfterCompute() that are triggered after the tree drawing process is finished. How can I generate a global event to notify the Angular service that the tree drawing process is complete and it's safe to query all nodes?