Javascript 从CSV数据创建D3.js可折叠树

对于那些更熟悉d3的人来说，这可能是一个有点愚蠢的问题，但我对d3还相当陌生，我不太明白如何让它工作：

我试图实现的是：

但是我想从平面CSV而不是JSON向它提供数据

问题是我的CSV格式如下：

父名称|子名称
-------------------------
父名称|子名称
-------------------------
父名称|子名称
所以…

我以前没有看到您想要做什么，但它是（需要一些数据处理才能将其精细化为正确的结构）和d3标准的组合

遗憾的是，我无法为您设置bl.ock来演示bl.ocks.org上运行的代码的实时代码，EDIT:，下面是html文件，它是这两种技术的组合

可折叠树示例
.节点圆{
填充：#fff；
笔画：钢蓝；
笔画宽度：3px；
}
.node文本{font:12px无衬线；}
.链接{
填充：无；
冲程：#ccc；
笔画宽度：2px；
}
//*************生成树形图*****************
var margin={顶部：20，右侧：120，底部：20，左侧：120}，
宽度=960-margin.right-margin.left，
高度=500-margin.top-margin.bottom；
var i=0；
var tree=d3.layout.tree（）
.尺寸（[高度、宽度]）；
var diagonal=d3.svg.diagonal（）
.投影（函数（d）{返回[d.y，d.x]；}）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。右侧+边距。左侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
//加载外部数据
d3.csv（“treedata.csv”），函数（错误、数据）{
//**********将平面数据转换为漂亮的树***************
//创建名称：节点映射
var dataMap=data.reduce（函数（映射，节点）{
map[node.name]=节点；
返回图；
}, {});
//创建树数组
var treeData=[]；
data.forEach（函数（节点）{
//添加到父级
var parent=dataMap[node.parent]；
如果（家长）{
//如果子数组不存在，则创建它
（parent.children | |（parent.children=[]））
//将节点添加到子数组
.推送（节点）；
}否则{
//父项为null或缺少
树数据推送（节点）；
}
});
根=树数据[0]；
更新（根）；
});
函数更新（源）{
//计算新的树布局。
var nodes=tree.nodes（root）.reverse（），
链接=树。链接（节点）；
//为固定深度进行规格化。
forEach（函数（d）{d.y=d.depth*180；}）；
//声明节点
var node=svg.selectAll（“g.node”）
.data（节点，函数（d）{返回d.id | |（d.id=++i）}）；
//输入节点。
var nodeEnter=node.enter（）.append（“g”）
.attr（“类”、“节点”）
.attr（“转换”，函数（d）{
返回“translate”（“+d.y+”，“+d.x+”）；}）；
nodeEnter.append（“圆”）
.attr（“r”，10）
.样式（“填充”、“fff”）；
nodeEnter.append（“文本”）
.attr（“x”，函数（d）{
返回d.children | | d.| u children？-13:13；}）
.attr（“dy”，“.35em”）
.attr（“文本锚定”，函数（d）{
返回d.children | | d.| children？“结束”：“开始”}）
.text（函数（d）{返回d.name；}）
.样式（“填充不透明度”，1）；
//声明链接
var link=svg.selectAll（“path.link”）
.data（链接，函数（d）{返回d.target.id；}）；
//输入链接。
link.enter（）插入（“路径”，“g”）
.attr（“类”、“链接”）
.attr（“d”，对角线）；
}

太棒了，谢谢。我还发现这个例子也使用了同样的原理：啊。。。做得好。我可能猜迈克在过去某个时候会这样描述。