How do I extract the values of parent nodes from a JSON file using D3?

I am currently using d3 to create a visual representation of data from a json file. This particular json file includes parent and children nodes structured like this:

{
    "name": "root",
    "size": 100,
    "child": [
        {
            "name": "First1",
            "size": 70,
            "child": [
                {
                    "name": "Second1",
                    "size": 85
                },
                {
                    "name": "Second2",
                    "size": 81
                }
            ]
        },
        {
            "name": "First2",
            "size": 40,
            "child": [
                {
                    "name": "Second3",
                    "size": 50,
                    "child": [
                        {
                            "name": "Third1",
                            "size": 80
                        }
                    ]
                }
            ]
        }
    ]
}

My intention is to visualize the size values at different depths in the data structure. For example, at depth 3, I aim to retrieve the size value of Third1; at depth 2, I need the sum of size values of Second1, Second2, and Second3; and at depth 1, I want to obtain the combined value of First1 and First2. Unfortunately, my current implementation sums up the values of lower depths instead of providing the individual node values. This has led to confusion and after spending two days on it, I have made no progress. Your assistance in resolving this issue would be greatly appreciated. Thank you!

Answer №1

Instead of child, I used children and here is the link to my fiddle. Is this what you were looking for?

The only change I made was switching child to children. The numerical values from various levels indicate the tree's depth, as evident in the displayed text element:

.text(function(d) { return d.depth + ": " + d.size;});

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

JSON payload with an array that includes nested JSON objects

I am struggling with JSON objects and need to create a JSN structure similar to the following: { name: 'root', children: [ name: 'son1', children: [....] ] } Could someone please guide me on how to construct it using Java ...

Sharing asynchronous data between AngularJS controllers

Among the multitude of discussions on sharing data between controllers, I have yet to come across a satisfactory solution for my particular scenario. In my setup, one controller fetches data asynchronously using promises. This controller then creates a co ...

The issue of process.server being undefined in Nuxt.js modules is causing compatibility problems

I've been troubleshooting an issue with a Nuxt.js module that should add a plugin only if process.server is true, but for some reason it's not working as expected. I attempted to debug the problem by logging process.server using a typescript modu ...

Is there a way to make a <div> load automatically when the page starts loading?

I'm having an issue with my code where both <div> elements run together when I refresh the page. I want them to display separately when each radio button is clicked. <input type="radio" name="cardType" id="one" class="css-checkbox" value="db ...

Adjusting loop sizes according to category identification

Can anyone help me troubleshoot my code? I am using the category_id where 1 represents shoe sizes and 2 represents apparel sizes. Currently, it is only displaying values for category_id(1) and for category_id(2) it is showing only "Large". Any suggestion ...

Implementing HTML5 canvas controls for pausing and resuming audio playback

Even after studying, I still find myself struggling with JavaScript and SoundJS syntax when it comes to using Flash in HTML5 canvas. My goal is to be able to pause and resume a sound using mouseover and mouseout events on the same button. Here's what ...

There seems to be a problem: "Type Error - undefined is not

I've encountered an error while attempting to subscribe to my observable in a Server Sent Event class that observes other components and sends information to them. Is anyone familiar with how to resolve this issue? Here is the Server Sent Event class ...

Filtering FieldSelector options in react-querybuilder: A step-by-step guide

I am currently working on a task to eliminate the fields from FieldSelector that have already been utilized. In my custom FieldSelector component, let's assume there are fields A, B, C, D, E available. If A & B have been used, they should not be ...

"Implementing a loading function on a particular div element within a loop using

Hey everyone! I'm new to this forum and have recently made the switch from jQuery to Vue.js - what a game-changer! However, I've hit a little snag. I need to set v-loading on multiple buttons in a loop and have it start showing when clicked. Her ...

How can I showcase Blob /JSON data in Liferay 7.2?

I am currently working with a service builder that efficiently retrieves form data from a MySQL database. One of the fields contains JSON data, and I attempted to map it using an object mapper library called com.fasterxml.jackson.databind.ObjectMapper in o ...

Trouble Parsing JSON in Android Application

Help needed with JSON webservice issue. Whenever I call the function, I encounter this exception: 03-19 15:14:10.013: E/JSON Parser(12011): Error parsing data org.json.JSONException: End of input at character 0 of 03-19 15:14:10.013: W/System.err(12011): ...

Concealing an element from a separate module

In the angularjs single page application project that I'm working on, there are two modules: module-'A' and module-'B'. Each module has its own view templates. The view template of module-'B' contains a div with id="sit ...

Adjust the CSS content using the data-content attribute to include line breaks

My current coding setup includes: <div id="mydiv" data-content="Loading..."></div> This is how I style it with CSS: #mydiv:after{ content: attr(data-content); height: 100%; opacity: 1; position: absolute; text-align: center; ...

Launching an external software using electron

I am in the process of developing my own personalized Electron app for managing other applications on my device. One issue I have encountered is the inability to create a link that opens my own .exe applications. I have attempted various methods without su ...

Can Vue.js automatically refresh the display when there are changes in a third-party JSON file?

I'm attempting to achieve a specific goal using Vue, but I'm uncertain if it's feasible given my current struggles in obtaining the desired outcome: An API endpoint returns an array containing multiple objects. While I am able to successfu ...

Adjust the height of an element using jQuery to dynamically match the window size without needing to refresh the page when the

I'm currently working with a script that functions properly when the page is refreshed. However, I am looking to dynamically obtain the size of the resized window without needing to refresh the page and then apply the corresponding height to a section ...

What is the process for incorporating Transformer instances into the buildVideoUrl() function using cloudinary-build-url?

This particular package is quite impressive, however, it seems to lack built-in support for looping gifs. Fortunately, the provided link demonstrates how custom URL sections like "e_loop" can be created. One challenge I'm facing is figuring out how t ...

What is the method for ensuring a variable returns a number and not a function?

I've encountered a perplexing issue that I can't seem to solve. What could be causing the code below to output a function instead of a number? let second = function(){ return 100 }; console.log(second); ...

Aurelia encountering an error when attempting to load Bootstrap v4 during runtime

In my aurelia.json file, I have the following configuration for bundling vendor scripts. It was directly copied from a working reference implementation and has been functioning properly. { 'build': { 'bundles': [ 'name ...

Can you guide me on how to replicate this for an additional 16 times? Apologies for the confusion

I need help with a code that can apply to multiple names at once, rather than one by one each time. Here's the example HTML code: <div id="one" class="text-container"> <span> Campfire Cooking in Another World wi ...