Utilize the nest function in D3 to organize flat data with a parent key into a hierarchical structure

I'm searching for an elegant and efficient solution to transform my input data into a hierarchical structure using d3.js nest operator. Here is an example of the input data:

[
{id: 1, name: "Peter"},
{id: 2, name: "Paul", manager: 1},
{id: 3, name: "Mary", manager: 1},
{id: 4, name: "John", manager: 2},
{id: 5, name: "Jane", manager: 2}
]

What I aim to achieve is a hierarchy layout like the one shown below:

[ 
   {name: "Peter", children: [
          {name:"Paul", children: [
              {name:"John"},
              {name:"Jane"}
          ]},
          {name:"Mary"}
      ]
   }
]

Answer №1

Using the nest operator in this scenario is not recommended as it creates a fixed hierarchy with the same number of levels as key functions specified.

However, a custom function can be created to build a tree structure. By treating the first node in the input array as the root node and mapping nodes to their respective ids, the tree can be lazily constructed.

function createTree(nodes) {
  var nodeById = {};

  // Index nodes by id for unordered input.
  nodes.forEach(function(node) {
    nodeById[node.id] = node;
  });

  // Construct children nodes as needed.
  nodes.forEach(function(node) {
    if ("manager" in node) {
      var managerNode = nodeById[node.manager];
      if (managerNode.children) managerNode.children.push(node);
      else managerNode.children = [node];
    }
  });

  return nodes[0];
}

If the nodes are ordered such that managers precede their reports, the code can be optimized for single iteration.

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

Hold off for the JSON parsing process to occur in a separate class file within a Swift 3 environment

In the code snippet below, I have created a class where I am parsing a JSON file outside the viewController. Initially, when I create an AllCards object in the view controller, it returns 0. However, after some time, it returns the correct number of cards ...

I need help figuring out how to handle click events when using VueJS 2.0 in conjunction with a vue-mdl menu component

While @click doesn't seem to respond, v-bind:click does register. However, I'm facing the challenge of not being able to access the mdl-menu or mdl-menu-item components in order to add the method. The goal is to implement something like @click=" ...

There seems to be an issue with creating cookies in the browser using Express.js

When using res.cookie(), I encountered an issue where the cookie was created but not showing in the browser. Although the cookie was not stored, it was visible when using Postman. I attempted to set the cookie using res.cookie("access_token", token, {sec ...

Switch up the current Slick Carousel display by utilizing a div element

We have implemented the slick carousel to show only one slide at a time within the <div class='item__wrapper'>. Beneath this are three items, and we want the slick carousel to update when any of these items are clicked. Issues Using item ...

Using Python to query a JSON object based on multiple filters across various levels

I need help querying a json object with specific criteria. I am looking to retrieve results where the sub key "type": "header1" and the sub sub key "type": "simpletext" are met, so that I can loop through them. Here ...

"Exploring the Dynamic Duo of AngularJS ngAnimate and animate.css

I've been working on getting my animation to function correctly with AngularJS and animate.css. In order to achieve this, I set up the SASS in the following way: .slide-animate { &.ng-enter, &.ng-leave{ } &.ng-enter { ...

Creating dependent dropdown lists is a useful way to streamline data entry and ensure accuracy in your

I am looking to create a series of 4 connected dropdown lists, structured like this: District: <select id="district"> <option>Select a District</option> <option value="district1">dstrict1</optio ...

Download files from Firebase storage to a user's device

I have a variety of files such as images, videos, and audio stored in my firebase storage. My goal is to provide users with the ability to download these files to their computers by clicking on a download button. After reviewing the firebase documentation ...

Unique option preservation on customized HTML select menus - Maintain original selection

Currently, I am attempting to replicate a custom HTML select based on the example provided by W3 Schools. You can view the demo through this link: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_custom_select The issue I am encountering is that ...

JQuery displays 'undefined' on checkbox loaded via Ajax

Currently, I am utilizing a checkbox to activate my select Option tag. The select option tag and checkbox are both loaded via ajax. While the select option works perfectly, the checkbox displays as undefined. However, it functions properly in enabling my d ...

Reliable Dropdown Navigation Bars

Once I have successfully implemented three dynamic drop down menus using the combination of jQuery, AJAX, and PHP, the next challenge arises. After populating the dropdown menus based on user selections (e.g., selecting a value in the first dropdown menu ...

Triggering an Ajax call for form validation only occurs when the form is not validated

I am struggling with a simple form that has an Ajax call, but the ajax call gets executed even if the form is not validated. In the code snippet below, the line console.log("This line should execute only if Form is validated"); gets executed when the form ...

Is it time to consider using a Promise in my JavaScript code given its rapid pace of execution?

I want to enhance the user experience of my web app by making elements fade away before being removed. However, I am facing an issue where my code is executing too quickly. I need it to wait for the element to "disappear" before actually removing it. Shoul ...

Adjust the button's background hue upon clicking (on a Wix platform)

I need some help with customizing the button "#button5" on my Wix website. Here are the conditions I'd like to apply: Button color should be white by default; When the user is on the "contact" page, the button color should change to red; Once the use ...

Obtaining the ID from a JSON object in react.js ES6: A Comprehensive Guide

I have an array of JSON objects containing properties like Name, ID, and Address. My goal is to retrieve the IDs from all objects in this JSON array using react.js ES6. If anyone could offer guidance on how to accomplish this task, it would be greatly appr ...

Connect to the MongoDB database running on localhost using the mongoose library

I am currently learning about the MEAN stack through this helpful tutorial. However, the tutorial assumes a connection to a remote mongodb installation. I have MongoDB already set up and running on my CentOS7 localhost. To modify the mongoose connect line ...

The AJAX response containing jQuery is failing to produce any visible changes

On Page 1 of my website, there is a form that, upon submission, loads Page 2 using jQuery. This process involves calling a PHP page and displaying the output on Page 1 without actually reloading the entire page. To maintain security, I have set up session ...

The useNavigate() hook from react-router-dom is not properly setting the id in the URL path

I am currently using react-router-dom v6 for my routing needs. My goal is to pass an ID in the navigate URL path. Here is the onClick method and button code that I am working with: let navigate = useNavigate(); const routeChange = (id) => { let ...

Accessing and parsing JSON data from directories within directories

My file directory structure is dynamic, with only the name of $(Root Directory) known at runtime. All folders and files are generated dynamically, with all files being in .json format. I am looking to count the number of files and read the content of eac ...

The proper way to insert data in JavaScript and PHP

Hello. I have a new function to add a row in my form. However, I recently added a second input field and I am unsure of how to correctly insert it. Below is my JavaScript code: <script type="text/javascript" src="jquery.js"></script> <scri ...