使用json D3嵌套选择:如何将.force()应用于嵌套元素?
问题描述:
(这是一个后续问题的一问here,这个问题并没有在这个问题彻底解决了,这是怎样的一个延续,所以我发布了一个新问题)使用json D3嵌套选择:如何将.force()应用于嵌套元素?
我有一个嵌套JSON结构代表一棵树,它看起来是这样的:
[{
"name": "flare",
"root": "true",
"children": [
{
"name": "analytics",
"nestedproperties": [
{ "attribute": "attribute1",
"type": "type1" },
{ "attribute": "attribute2",
"type": "type2" },
{ "attribute": "attribute3",
"type": "type3" }
],
"children": [
{
"name": "cluster",
"nestedproperties": [
{ "attribute": "attribute4",
"type": "type4"},
....
]
},
...
除了与节点和他们的孩子显示正常的树结构,我要代表nestedproperties
下,每个元件都链接到他们的父节点的圈子。
通过以下的答案我管理通过使嵌套数据作为参数来.data()
,以显示每个的nestedproperties
元素如this question建议其它一些问题,并在其它实例。代码的核心部分是这样的:
var pii = nodeEnter.selectAll("circle.pii")
.data(function(d) {return d.nestedproperties; })
var piiEnter = pii.enter().append("svg:g")
.attr("class", "piinode")
.attr("transform", "translate(50,50)")
//.attr("transform", function(d, i) { return "translate(" + d.x + "," + d.y + ")"; }) // <<--- I cannot call this function because d.x and d.y does not exist
.call(forcepii.drag);
// Append the circle for the node
piiEnter.append("svg:circle")
.attr("class", "pii")
.attr("r", 25)
.style("fill", "blue")
.style("stroke", "#999999")
完整的代码是在这个jsfiddle。
问题是,代表嵌套属性内的元素的圆圈全部相互叠加显示,无法拖动。我不明白如何将force.nodes()
应用于嵌套元素或如何使用transform
属性对它们进行滴答。
尝试以下告诉我“遗漏的类型错误:无法设置的未定义的属性‘指数’”
forcepii.nodes(function(d) { return d.nestedproperties; })
//.links(links)
.gravity(0.05)
.charge(-1500)
.linkDistance(100)
.friction(0.5)
.linkStrength(function(l, i) {return 1; })
.size([w, h])
//.on("tick", tick)
.start();
这里是拍摄的图像。正如你所看到的圆上彼此力量的顶部绘制并未被应用于:
感谢您的帮助!
答
最后我发现这是如何完成的。这里是表示活生生的例子一个要点:http://bl.ocks.org/djjupa/5655723
由于我的数据是“灵活”我重新编码它有“孩子”元素嵌套的选择,所以它看起来是这样的:
[{
"name": "flare",
"root": "true",
"children": [
{
"name": "analytics",
"nestedproperties": {
"children": [
{ "attribute": "attribute1",
"type": "type1" },
{ "attribute": "attribute2",
"type": "type2" },
{ "attribute": "attribute3",
"type": "type3" }
]
},
"children": [
{
"name": "cluster",
"nestedproperties": {
"children": [
{ "attribute": "attribute4",
"type": "type4"
},
....
]
}
},
...