Javascript D3.js可折叠树-显示不止一个节点名称

我使用了这个链接中显示的可折叠树，我需要显示每个节点的详细信息。这是它唯一的名字。任何例子或任何链接

只需为每个附加信息添加新的文本元素，并调整dy位置以适当放置它们。另外，在折叠/展开操作期间，不要忘记使用

selectAll

而不是

select

来更新文本元素的

fill opacity

var flare={
“名称”：“flare”，
“info1”：“flare子文本1”，
“信息2”：“flare子文本2”，
“儿童”：[
{
“名称”：“分析”，
“信息1”：“分析子文本1”，
“信息2”：“分析潜台词2”，
“儿童”：[
{
“名称”：“集群”，
“info1”：“集群子文本1”，
“信息2”：“集群子文本2”，
“儿童”：[
{“name”：“aggregativecluster”，“size”：3938，“info1”：“aggregativecluster subtext 1”，“info2”：“aggregativecluster subtext 2”}
]
},    
{
“名称”：“优化”，
“信息1”：“优化子文本1”，
“信息2”：“优化潜台词2”，
“儿童”：[
{“名称”：“AspectRatioBanker”，“大小”：7074，“信息1”：“AspectRatioBanker子文本1”，“信息2”：“AspectRatioBanker子文本2”}
]
}
]
},
{
“名称”：“动画”，
“信息1”：“为子文本1设置动画”，
“信息2”：“为子文本2设置动画”，
“儿童”：[
{“name”：“Easing”，“size”：17010，“info1”：“Easing subtext 1”，“info2”：“Easing subtext 2”}
]
}
]
};
var margin={顶部：20，右侧：120，底部：20，左侧：120}，
宽度=960-margin.right-margin.left，
高度=800-margin.top-margin.bottom；
var i=0，
持续时间=750，
根；
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+”）；
根=耀斑；
root.x0=高度/2；
root.y0=0；
功能崩溃（d）{
如果（d.儿童）{
d、 _children=d.children；
d、 _儿童。forEach（崩溃）；
d、 children=null；
}
}
根。子。forEach（塌陷）；
更新（根）；
d3.选择（self.frameElement）.style（“高度”，“800px”）；
函数更新（源）{
//计算新的树布局。
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（“transform”，函数（d）{return“translate”（“+source.y0+”，“+source.x0+”））；}）
。开启（“点击”，点击）；
nodeEnter.append（“圆”）
.attr（“r”，1e-6）
.style（“fill”，函数（d）{return d._children？“lightsteelblue”：“fff”}）；
nodeEnter.append（“文本”）
.attr（“x”，函数（d）{返回d.children | | d._children？-10:10；}）
.attr（“dy”，“-.75em”）
.attr（“文本锚定”，函数（d）{return d.children | | d.| u children？“end”：“start”}）
.text（函数（d）{返回d.name；}）
.样式（“填充不透明度”，1e-6）；
nodeEnter.append（“文本”）
.attr（“x”，函数（d）{返回d.children | | d._children？-10:10；}）
.attr（“dy”，“1.00em”）
.attr（“文本锚定”，函数（d）{return d.children | | d.| u children？“end”：“start”}）
.text（函数（d）{return d.info1；}）
.样式（“填充不透明度”，1e-6）；
nodeEnter.append（“文本”）
.attr（“x”，函数（d）{返回d.children | | d._children？-10:10；}）
.attr（“dy”，“2.35em”）
.attr（“文本锚定”，函数（d）{return d.children | | d.| u children？“end”：“start”}）
.text（函数（d）{return d.info2；}）
.样式（“填充不透明度”，1e-6）；
//将节点转换到其新位置。
var nodeUpdate=node.transition（）
.持续时间（持续时间）
.attr（“转换”，函数（d）{return“translate”（+d.y+），“+d.x+”）；}）；
节点更新。选择（“圆圈”）
.attr（“r”，4.5）
.style（“fill”，函数（d）{return d._children？“lightsteelblue”：“fff”}）；
nodeUpdate.selectAll（“文本”）
.样式（“填充不透明度”，1）；
//将退出节点转换到父节点的新位置。
var nodeExit=node.exit（）.transition（）
.持续时间（持续时间）
.attr（“transform”，函数（d）{return“translate”（“+source.y+”，“+source.x+”）”）；}）
.remove（）；
nodeExit.select（“圆”）
.attr（“r”，1e-6）；
nodeExit.selectAll（“文本”）
.样式（“填充不透明度”，1e-6）；
//更新链接…
var link=svg.selectAll（“path.link”）
.data（链接，函数（d）{返回d.target.id；}）；
//在父对象的上一个位置输入任何新链接。
link.enter（）插入（“路径”，“g”）
.attr（“类”、“链接”）
.attr（“d”，函数（d）{
var o={x:source.x0，y:source.y0}；
返回对角线（{source:o，target:o}）；
});
//过渡链接到他们的新位置。
link.transition（）
.持续时间（持续时间）
.attr（“d”，对角线）；
//将退出节点转换到父节点的新位置。
link.exit（）.transition（）
.持续时间（持续时间）
.attr（“d”，函数（d）{
var o={x:source.x，y:source.y}；
返回对角线（{source:o，target:o}）；
})
.remove（）；
//将旧位置隐藏起来，以便过渡。
nodes.forEach（函数（d）{
d、 x0=d.x；
d、 y0=d.y；
});
}
//在单击时切换子项。
功能点击（d）{
如果（d.儿童）{
d、 _children=d.children；
d、 children=null；
}否则{
d、 儿童=d.\U儿童；
d、 _children=null；
}
更新（d）；
}

.node{
光标：指针；
}