d3.nest()键和值转换为name和children

Question

我正在从csv文件创建一个Treemap.作为我使用的结果,csv文件中的数据是分层的d3.nest().

但是,生成的JSON的形式为{key:"United States", values:[...]}.可缩放的树形图需要层次结构{name:"United States", children:[...]}.我已经尝试将名称和子项替换为示例中的键和值,但它不起作用.

如果有人已经考虑在可缩放树形图上使用键和值,请帮助.我是D3的新手,我不知道d.children是否意味着数据的结构或价值.

这是使用d3将世界大陆,地区和国家/地区从CSV转换为层次结构的代码.

$ d3.csv("../Data/WorldPopulation.csv", function (pop) {
    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)
};

结果的前几行是:

 `[{"key":"AFRICA","values":[{"key":"Eastern Africa","values"
 [{"key":"Burundi","values":[.........`

我无法使用zoomable treemap,因为它需要json中的name和children标签,而不是key和values.

Answer 1

将嵌套转换为树形图的最佳方法是使用Treemap.children()指定子访问器函数.

在zoomable treemap示例中,它不仅需要"children",还需要"name"和"size".你可以这样做:

1)更改这些属性的访问者功能,以便继续使用"key"和"value".

让我们改变源代码.

1.1)第79和86行:

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

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

将".name"替换为".YOUR_NAME_KEY"(即".key")

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

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

1.2)第47行:

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

附加一行以指定子访问函数.(即".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)第97和51行:

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

将".size"替换为".YOUR_SIZE_KEY"(您在生成的JSON中未提及)

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

PS也许遗漏了一些东西,你需要自己验证一下.

2)将您的JSON结构转换为适合Array.map()的示例.

Answer 2

我完全同意@Anderson的说法,解决这个问题的最简单方法是使用树形图children(function)和.value(function)方法来指定嵌套数据集中属性的名称.

但是,最近发布了一个重复的问题,其中提问者特别请求使用Array.map方法的帮助.所以这里是:

的阵列map(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

您也可以使用递归函数来实现它,如果您有更多级别的嵌套,这将特别有用.