javascript - d3.nest() 键和值转换为名称和子项

Question

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

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

如果有人已经研究过在可缩放 TreeMap 上使用键和值，请提供帮助。我是 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":[.........`

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

Answer 1

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

在可缩放 TreeMap 示例中，它不仅需要“children”，还需要“name”和“size”。您可以执行以下任一操作:

1) 更改这些属性的访问器函数，以便继续使用“键”和“值”。

让我们改变source code .

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;
}

附言可能有遗漏，需要自己验证。

2) 转换您的 JSON 结构以适合带有 Array.map() 的示例.