d3.nest（）键和值转换为name和children [英] d3.nest() key and values conversion to name and children

问题描述

我正在从csv文件创建一个树形图。
csv文件中的数据是层次结构，因此我使用d3.nest（）。
然而，生成的JSON的形式是{key：United States，values：[...]}
可缩放树图例如（ http://mbostock.github.io/d3/talk/20111018/treemap.html ）
要求层次结构as {name：United States，children：[...]}。
我已经尝试将示例中的名称和孩子替换为键和值，但它不工作。
如果任何人已经研究了使用可缩放树图上的键和值，请帮助。我是新的D3，我不知道d.children是否意味着结构或值从数据。

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(). However, the resulting JSON is in the form of {key:"United States", values:[...]} The zoomable treemap e.g (http://mbostock.github.io/d3/talk/20111018/treemap.html) requires hierarchy as {name:"United States", children:[...]}. I have tried replacing name and children to key and values in the example, but it doesnt work. If anyone has already looked into using key and values on a zoomable treemap, please help. I am new to D3 and i dont 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函数（d）{return d.Region;}）
.key（function（d）{return d.Country;}）
.entries（pop）
};

结果的前几行是：

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

我无法使用缩放树图，因为它需要名称和

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().

在可缩放的treemap示例中，它不仅需要children，还需要name和size。您可以执行以下操作之一：

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

1）更改这些属性的访问器函数，以便继续使用key和value。

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）line 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

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）转换JSON结构以适应 Array.map a>。

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

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