根据您的其他question https://stackoverflow.com/q/50033279/7106086，我假设您想在 d3 分层布局中使用此分层数据
一旦被 d3.csv/tsv/dsv 等读取，您将得到一个包含如下对象的数组：
[
{ "world": "World","country": "US","state": "CA" },
{ "world": "World","country": "US","state": "NJ" },
{ "world": "World","country": "INDIA","state": "OR" },
{ "world": "World","country": "INDIA","state": "AP"}
]
我们可以使用 d3 Nest 来获得 d3 层次结构（树、树状图等）布局的可用树的大部分方式：
{
"key": "World", "values": [
{
"key": "US", "values": [
{ "world": "World", "country": "US", "state": "CA" },
{ "world": "World", "country": "US", "state": "NJ" }
]
},
{
"key": "INDIA", "values": [
{ "world": "World", "country": "INDIA", "state": "OR" },
{ "world": "World", "country": "INDIA", "state": "AP" }
]
}
]
}
这是用以下材料制成的：
var nestedData = d3.nest()
.key(function(d) { return d.world; })
.key(function(d) { return d.country; })
.entries(data);
这会生成一个数组，数组中的每个项目都是根。要使用 d3.nest() 获取上面的 json，我们需要获取数组中的第一个元素，在本例中，nestedData[0];。另请注意，我们通常不需要嵌套最低级别，在本例中为状态
现在我们可以将这些数据提供给d3.层次结构 https://github.com/d3/d3-hierarchy#hierarchy获取用于可视化的层次结构。如果您查看文档，我们会发现与示例具有相同的数据结构，只是我们的子项包含在名为“values”而不是“children”的属性中。不用担心，d3.hierarchy 允许我们设置保存子项的属性的名称：
d3.hierarchy(数据[ 子级])
...
为每个数据调用指定的子访问器函数，
从根数据开始，并且必须返回一个数据数组
代表孩子，如果当前数据没有则为 null
孩子们。如果没有指定children，则默认为：
function children(d) { return d.children; }
因此，为了获取从 d3.nest 创建的上述数据，我们将其提供给 d3.hierarchy：
var root = d3.hierarchy(nestedData[0],function(d) { return d.values; })
现在我们有了一个可以输入到任何 d3 分层布局的数据集：
var data = [
{ "world": "World","country": "US","state": "CA" },
{ "world": "World","country": "US","state": "NJ" },
{ "world": "World","country": "INDIA","state": "OR" },
{ "world": "World","country": "INDIA","state": "AP"}
];
var nestedData = d3.nest()
.key(function(d) { return d.world; })
.key(function(d) { return d.country; })
.entries(data);
var root = d3.hierarchy(nestedData[0], function(d) { return d.values; })
// Now draw the tree:
var width = 500;
var height = 400;
margin = {left: 10, top: 10, right: 10, bottom: 10}
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var g = svg.append("g").attr('transform','translate('+ margin.left +','+ margin.right +')');
var tree = d3.tree()
.size([height-margin.top-margin.bottom,width-margin.left-margin.right]);
var link = g.selectAll(".link")
.data(tree(root).links())
.enter().append("path")
.attr("class", "link")
.attr("d", d3.linkHorizontal()
.x(function(d) { return d.y; })
.y(function(d) { return d.x; }));
var node = g.selectAll(".node")
.data(root.descendants())
.enter().append("g")
.attr("class", function(d) { return "node" + (d.children ? " node--internal" : " node--leaf"); })
.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })
node.append("circle")
.attr("r", 2.5);
node.append("text")
.text(function(d) { return d.data.key; })
.attr('y',-10)
.attr('x',-10)
.attr('text-anchor','middle');
path {
fill:none;
stroke: steelblue;
stroke-width: 1px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>
这是一个例子 http://bl.ocks.org/Andrew-Reid/7ae1657ba0426683585cd18a0e002f62带有实际的 csv 和更多行和级别。
如果 csv 数据结构不同，包含父子对，那么用 d3.csv/tsv/dsv 解析后，它看起来会像这样：
[
{parent: "", name: "World"},
{parent: "World", name:"US"},
{parent: "World", name:"India"},
{parent: "India", name:"OR" },
{parent: "India", name:"AP" },
{parent: "US", name:"CA" },
{parent: "US", name:"WA" }
]
这样我们就可以使用d3.stratify而不是组合d3.nest and d3.hierarchy:
var data = [
{parent: "", name: "World"},
{parent: "World", name:"US"},
{parent: "World", name:"India"},
{parent: "India", name:"OR" },
{parent: "India", name:"AP" },
{parent: "US", name:"CA" },
{parent: "US", name:"WA" }
];
// manipulate data:
var root = d3.stratify()
.id(function(d) { return d.name; })
.parentId(function(d) { return d.parent; })
(data);
// Now draw the tree:
var width = 500;
var height = 400;
margin = {left: 10, top: 10, right: 10, bottom: 10}
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var g = svg.append("g").attr('transform','translate('+ margin.left +','+ margin.right +')');
var tree = d3.tree()
.size([height-margin.top-margin.bottom,width-margin.left-margin.right]);
var link = g.selectAll(".link")
.data(tree(root).links())
.enter().append("path")
.attr("class", "link")
.attr("d", d3.linkHorizontal()
.x(function(d) { return d.y; })
.y(function(d) { return d.x; }));
var node = g.selectAll(".node")
.data(root.descendants())
.enter().append("g")
.attr("class", function(d) { return "node" + (d.children ? " node--internal" : " node--leaf"); })
.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })
node.append("circle")
.attr("r", 2.5);
node.append("text")
.text(function(d) { return d.data.name; })
.attr('y',-10)
.attr('x',-10)
.attr('text-anchor','middle');
path {
fill: none;
stroke: steelblue;
stroke-width: 1px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>
