d3.nest() 键和值转换为名称和子项 [英] d3.nest() key and values conversion to name and children

问题描述

我正在从 csv 文件创建树状图.csv文件中的数据是分层的，因此我使用了d3.nest().

I am working on creating a Treemap from a csv file. The data in the csv file is hierarchical, as a result I used d3.nest().

然而，生成的 JSON 格式为 {key:"United States", values:[...]}.可缩放的 treemap 要求层次结构为 {name:美国"，儿童:[...]}.我曾尝试将示例中的 name 和 children 替换为 key 和 values，但它不起作用.

However, the resulting JSON is in the form of {key:"United States", values:[...]}. The zoom-able treemap requires hierarchy as {name:"United States", children:[...]}. I have tried replacing name and children to key and values in the example, but it doesn't work.

如果有人已经研究过在可缩放的树形图上使用键和值，请帮忙.我是 D3 的新手，我不知道 d.children 是指数据的结构还是值.

If anyone has already looked into using key and values on a zoomable treemap, please help. I am new to D3 and I don't know whether d.children means structure or value from the data.

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

This is the code to convert World Continents, Regions, and Countries from CSV to a hierarchy using d3.

$ 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":[.........`

我不能使用可缩放的树状图，因为它需要 json 中的名称和子标签，而不是键和值.

I can not use the zoomable treemap because it requires name and children labels in json rather than key and values.

推荐答案

将嵌套转换为树状图的最佳方法是使用 Treemap.children().

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) 更改这些属性的访问器函数，以便继续使用键"和值".

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

让我们更改源代码.

1.1) 第 79 行 &86:

1.1)line 79 & 86:

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

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

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

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) 第 47 行:

1.2)line 47:

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

附加一行以指定子访问器函数.(即.values")

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) 第 97 行 &51:

1.3)line 97 & 51:

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

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

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) 使用 Array.map().

这篇关于d3.nest() 键和值转换为名称和子项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！