The sequencing of code execution in JavaScript (illustrated using an example in d3-force)

I'm currently delving into this code to grasp the inner workings of d3-force.

As I examine the variable nodes, I am intrigued by how positions are assigned to them.

  // Replace the input nodes and links with mutable objects for the simulation.
  console.log(nodes); // Added by me
  nodes = d3.map(nodes, (_, i) => ({id: N[i]}));
  console.log(nodes); // Added by me
  links = d3.map(links, (_, i) => ({source: LS[i], target: LT[i]}));

It's fascinating to see that after the d3.map operation, the variable nodes contains all the necessary parameters for forceSimulation, such as index, x, y, vx, vy.

I suspect that the behavior is more related to how JavaScript executes the functions below it rather than d3 itself, but I haven't quite pinpointed how.

I also checked the output of N, but it seems to only contain the expected id values without any surprises.

Answer №1

Those specific characteristics you referenced are actually generated by the simulation itself, once the nodes have been passed to it.

According to the official documentation,

Every node needs to be an object. The simulation will automatically assign the following properties:

  • index - position of the node within the nodes array
  • x - current x-coordinate of the node
  • y - current y-coordinate of the node
  • vx - current x-velocity of the node
  • vy - current y-velocity of the node

Initially, when you log the nodes, they won't possess these given properties. However, once the simulation is executed, these properties will become visible on the previously logged object in the console. In Chrome, a blue icon appears indicating something like "the object below was evaluated just now". If you use

console.log(JSON.stringify(nodes))
instead of console.log(nodes), you'll see the original object.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using VueJs to invoke a plugin from a .js file

I'm seeking a deeper understanding of working with vueJS. My current setup In my Login.vue component, there is a function logUser() from UserActions.js which in turn calls the postRequest() function from AxiosFacade.js Additionally, I use a plugin ...

Tips for centering a bootstrap card on the screen using reactjs

I've been struggling to keep my card centered on the screen despite using align-items and justify-content. I've researched on various websites to find a solution. //Login.js import React, { Component } from 'react'; import './App ...

Unexpected quirks noticed in the .html() function with jQuery and JavaScript

I have this straightforward HTML code: <td id="comment_td"> </td>. Notice the two spaces inside the td tags. I am checking the content of the td element like this: if (!$('#comment_td').html()) { $('#comment_td').html( ...

Load images in advance using this script

Using a script to load images on two websites, the image is placed inside a div with the ID div-to-load-external-image Encountering an issue where PageSpeed Insights advises to preload these images, seeking guidance... Any assistance will be appreciated. ...

What is preventing the onmouseup event from being effective?

In my recent research, I came across some interesting information on mouse-click events from w3schools. According to them, the onmousedown, onmouseup, and onclick events are all crucial parts of a mouse-click process. It starts with the onmousedown event b ...

What is the method for utilizing a parameter in a protractor configuration file to select specific steps?

After reading this particular question, I attempted to implement the following: protractor test/features/protractor-conf.js --params.test_set=dev_test as well as protractor-conf.js: exports.config = { // ... specs: [browser.params.test_set+'/ ...

Javascript Egg Timer

I am currently in the process of developing a unique egg timer application that allows users to input values through various form select tags. However, I have encountered a NaN error when trying to set the timer with the JavaScript code provided below. H ...

Could my object exports be the issue? I'm new to JS and struggling to figure out why my test is not passing

Just dipping my toes into the world of Javascript and currently tackling objects and test driven development in my classes. I've encountered a bit of trouble with my code and tests - not quite sure why they're failing. Initially, everything work ...

Create a web application in NodeJS that mimics browser functionality by running JavaScript code from an HTML page

I'm a beginner in NodeJS and I am working on developing a web service that can send a response with the output of a JavaScript script from an HTML page sourced online. For instance: Imagine my webpage contains a JavaScript snippet that outputs "hell ...

Guide on implementing a check all and delete function using the datatables (jquery datagrid plugin)

I am currently utilizing the Datatables jQuery plugin to manage my table rows. While it comes with a tabletools plugin that allows for a checkall function, I am wondering how I can add a custom delete button and retrieve the selected row. Fortunately, I a ...

Executing the Javascript function after the dynamic loading of the table through an ajax request

After the table finishes loading, I would like to trigger a JavaScript function. Originally, I considered using the onload() function on the table, but I discovered that it does not actually work for tables. ...

Guide on accessing an array within a JSON object?

I have the following JSON object: [ { "comments": [ { "created_at": "2011-02-09T14:42:42-08:00", "thumb": "xxxxxxx", "level" ...

Images displayed alongside webpage contents

I'm having trouble getting these photos to display in the same row. Any suggestions on what I should change? https://i.stack.imgur.com/EbvmR.png I've attempted using float left and other commands, but one picture continues to stay in the lower r ...

Choosing a table row in ReactIn React, you can

I am currently facing an issue with selecting only one row at a time in my React Material App. The problem I am encountering is that multiple rows are being highlighted instead of just one. My goal is to highlight/select only a single row at any given time ...

Developing play and pause capabilities using JavaScript for the existing audio player

Currently, I am developing a Chrome extension that includes an HTML popup with buttons to play audio files. However, I feel that my current approach is not the most efficient and I am struggling to find ways to simplify the process. The method I am using n ...

How to incorporate user-submitted form data into the existing state using React

I am currently working on a React project that involves a form input. The goal is for the user to input a number into the field, and then take that number and add it to another number in the application's state. For example, if this.state.data initia ...

Trouble arises when adding a .js script to the webpage

I'm feeling quite puzzled by this small piece of code, as it appears to be the simplest thing you'll come across today. Despite that, I can't help but seek guidance because I've been staring at it for what feels like an eternity and can ...

Unable to retrieve the URL using the getDownloadURL function from Firebase

I have been using Firebase storage to successfully store images, however I am encountering an issue when trying to retrieve the image URL from a promise. const imageSaveHandler = (e) => { e.preventDefault(); const uploadTask = storage.ref(`i ...

Path to local image in JavaScript

Apologies for the newbie question, but I'm trying to display a gif on a webpage using an HTTP link and it works perfectly. However, when I try to replace it with a file path, it doesn't work. The gif is located in the same folder as the webpage. ...

By default, the sidebar is open on desktop devices while closed on mobile devices

I am struggling to figure out how to set my sidebar/navigation content, using Bootstrap, to be expanded by default on desktop and closed by default on mobile with the icon only showing on mobile devices. Despite multiple attempts, I cannot seem to make thi ...