根据你的其他问题,我假设你想在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]
。还要注意的是,通常我们不需要嵌套最低级别,本例中为state。
现在,我们可以将这些数据提供给
d3.hierarchy以获得用于可视化的层次结构。如果您查看文档,我们与示例具有相同的数据结构,除了我们的children包含在一个叫做“values”的属性中,而不是“children”。不必担心,d3.hierarchy允许我们设置包含子代的属性的名称:
引用:
d3.hierarchy(data[, children])
...
对于每个数据,从根数据开始调用指定的children访问器函数,并且必须返回一个表示子数据的数据数组,或者如果当前数据没有子数据,则返回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; })
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>
这里有一个例子,包含一个实际的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
和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" }
];
var root = d3.stratify()
.id(function(d) { return d.name; })
.parentId(function(d) { return d.parent; })
(data);
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>