d3 CSV中的可缩放树形图
我刚刚与D3合作，我发现它非常谦虚。
我的目标是从CSV文件制作树图。 我想使用CSV格式，因为我将在电子表格中处理值，而且我很容易以这种方式保存文件。
我试图以分层格式存储数据，像这样（hier.csv）：
parent,child,value
Homer Simpson,Bart,20
Homer Simpson,Lisa,14
Homer Simpson,Maggie,6
Peter Griffin,Chris,19
Peter Griffin,Meg,12
Peter Griffin,Stewie,9
我正在使用这个Zoomable Treemap示例。
我希望树会随意深入，即，如果Bart在我的例子中有孩子，并根据姓名积累父母/孩子的关系。
我发现了Sankey Diagrams的一个很好的例子，但我还没有找到Zoomable Treemaps的等价物。
有没有办法在Bostock示例的第124和126行之间插入一些代码，以便正确地为Zoomable Treemap格式化数据？ （我可以更改我的CSV的布局，但想保留CSV格式）。 像这种方法使用nest() ，但显然这不起作用：
d3.csv("./hier.csv", function(hier) {
var root = {
"name": "myrootnode",
"children": d3.nest()
.key(function (d) { return d.parent; })
.key(function (d) { return d.child; })
.entries(hier)
};
initialize(root);
accumulate(root);
layout(root);
display(root);
//etc...
我看到了一些示例和StackOverflow问题，这些问题解决了这个问题的一些小问题，但还没有能够将它们整合到一起。 而我一直在研究和黑客无济于事。 我会欢迎一些帮助。 谢谢！
FIDDLE HERE
http://jsfiddle.net/KXuWD/
小提琴：
更新
我克服了我的问题的一部分。 我认为nest()是必要的，但我没有太多想法，但我没有正确更新我的访问器。 以下是一些非常琐碎的看法，主要是：http://bl.ocks.org/maw246/7303963
我的例子和Bostock之间的主要区别在于：
d3.nest()加载后，CSV被嵌套。 这将其强制转换为分层JSON对象格式 d3.nest()使用key和values属性构建树而不是Treemap的预期name和children属性。 用于块大小的value属性保持不变。 剩余的问题
d3.nest()功能，但尚未尝试过。 undefined 。 我确信我只是略过了一些简单的东西，但我主要关心的是让核心功能发挥作用，所以当我有一分钟的时候，我会稍微深入一点。 注意：我仍然在寻求一种干净而惯用的方法来帮助您做到这一点，其中包括如何最好地组织用于分层嵌套的CSV到任意深度的建议！
在调查树形图的使用时，我一直有类似的挫折感。 来自服务器的数据是平坦的表格式数据，例如：
var myData = [{ "thedad": "Homer Simpson", "name": "Bart", "value": 20 },
{ "thedad": "Homer Simpson", "name": "Lisa", "value": 14 },
{ "thedad": "Homer Simpson", "name": "Maggie", "value": 6 },
{ "thedad": "Peter Griffin", "name": "Chris", "value": 19 },
{ "thedad": "Peter Griffin", "name": "Meg", "value": 12 },
{ "thedad": "Peter Griffin", "name": "Stewie", "value": 16 },
{ "thedad": "Bart", "name": "Bart Junior A", "value": 77 },
{ "thedad": "Bart", "name": "Bart Junior B", "value": 32 }];
然而，d3树形图需要它处理的JavaScript对象的分层格式。 经过繁琐的搜索之后，我偶然发现d3谷歌组织中提到了underscore.nest 。 https://github.com/iros/underscore.nest
“Underscore.Nest是用于将平面数据转换为嵌套树结构的扩展[下划线js库]”。
使用这个库（再次，依赖于underscore.js）意味着你不必诉诸于d3.nest，并担心它产生的键/值数据格式。
工作示例
下面是树形图的一个工作示例，它将已经由underscore.nest转换为d3树形图所期望的分层格式的对象的扁平列表。 （没有underscore.nest的原始树形图来自mbostock的示例：http://bost.ocks.org/mike/treemap/）
http://jsbin.com/aGIvOnEH/3
root = _.nest( myData, "thedad");
root.name = "TV Dads";
希望这是有用的。
未经测试，可能不是很习惯（JavaScript不是我的东西），但可能会让你走上正轨。 我正在使用underscore.js因为我很懒，如果你在意使用本地循环的话。
d3.csv(csv_url, function(error, data) {
var root = {
name: "Everybody",
value: 0,
children: []
};
var parents = {};
_.each(data, function(row) {
var child = {
name: row.child,
value: row.value,
children: []
};
if(parents[row.parent]) { // parent seen already
parents[row.parent]['children'].push(child);
parents[row.parent]['value'] += row.value;
} else { // new parent
parents[row.parent] = {
name: row.parent,
children: [child],
value: row.value
}
}
root.value += row.value;
});
root.children = _.values(parents);
...
从mg1075的回答中，我看到myData是自引用数据，意味着一行中的孩子成为另一行中的父母并拥有自己的孩子。 这导致了一种深度可变的层次结构，并且深度不能通过仅查看一行来计算; 该计划需要遍历整个事情并建立关系。 d3.nest()对此不起作用..它需要整个祖先一直排到每个单独行中排在前面的顶部。
我仍然需要探索underscore.js ，但是mg1075的jsbin工作示例表明它并没有真正解决问题：Bart在树状图中位于Homer Simpson旁边，他的孩子尽管是荷马辛普森的孩子，但仍然在那里; 他也出现在荷马辛普森之下（让他成为他自己的叔叔：P），但没有任何孩子被列在他的下方（所以巴特的克隆叔叔偷走了他的孩子，可怜的霍默辛普森没有任何孙子）。 所以基本上孙子们都不承认。
我发布了一个问题，然后使用一个名为DataStructures.Tree的库在这里找到了这种可变深度分层数据的可视化解决方案。 我认为这可能有所帮助：
https://stackoverflow.com/a/27756744/4355695
链接地址: http://www.djcxy.com/p/75205.html