d3.nest() key and values conversion to name and children

I completely agree with @Anderson that the easiest approach to this issue is to use the treemap children(function) and .value(function) methods to specify the names of the properties within the nested dataset.

However, a duplicate question has recently been posted in which the questioner specifically asks for help using an Array.map approach. So here it is:

The array map(function) method creates a new array where each element in the array is the result of running the specified function on each element of the original array. Specifically, the function is run with up to three arguments: the element from the original array, the index of that element, and the original array as a whole. For the purposes of manipulating the property names, we only need the first argument.

The nested data in the original post has three levels, equivalent to the three key functions. Therefore, we're going to need a three-level mapping function:

var treeData = {
    "key": "World",
    "values": d3.nest()
        .key(function(d) {
            return d.Major_Region;
        })
        .key(function(d) {
            return d.Region;
        })
        .key(function(d) {
            return d.Country;
        })
        .entries(pop)
};

var treeData2 = {
    "name": "World",
    "children": treeData.values.map(function(major) {

        return {
            "name": major.key,
            "children": major.values.map(function(region) {

                return {
                    "name": region.key,
                    "children": region.values.map(function(country) {

                        return {
                            "name": country.key,
                            "children": country.values
                        };

                    }) //end of map(function(country){
                };

            }) //end of map(function(region){
        };

    }) //end of map(function(major){
}; //end of var declaration

You could also probably implement this with a recursive function, which would be especially useful if you had many more levels of nesting.


The best way to convert a nest to a treemap is specifying children accessor function with Treemap.children().

In the zoomable treemap example , it requires not only "children" but also "name" and "size". You can do either:

1)change the accessor functions of those properties so that keep using "key" and "value".

Let's change the source code.

1.1)line 79 & 86:

 .style("fill", function(d) { return color(d.parent.name); });

 .text(function(d) { return d.name; })

Replace ".name" with ".YOUR_NAME_KEY"(i.e. ".key")

 .style("fill", function(d) { return color(d.parent.YOUR_NAME_KEY); });

 .text(function(d) { return d.YOUR_NAME_KEY; })

1.2)line 47:

var treemap = d3.layout.treemap()
.round(false)
.size([w, h])
.sticky(true)
.value(function(d) { return d.size; });

Append a line to specify children accessor function.(i.e ".values")

var treemap = d3.layout.treemap()
.round(false)
.size([w, h])
.sticky(true)
.value(function(d) { return d.YOUR_SIZE_KEY; })
.children(function(d){return d.YOUR_CHILDREN_KEY});

1.3)line 97 & 51:

function size(d) {
  return d.size;
}

Replace ".size" with ".YOUR_SIZE_KEY"(you didn't mention in your resulting JSON)

function size(d) {
  return d.YOUR_SIZE_KEY;
}

P.S. Maybe something omitted, you need verify it yourself.

2)convert your JSON structure to fit the example with Array.map().