使用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();

这里是拍摄的图像。正如你所看到的圆上彼此力量的顶部绘制并未被应用于：

enter image description here

感谢您的帮助！

来源

2013-05-11 djjupa

最后我发现这是如何完成的。这里是表示活生生的例子一个要点：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" 
        }, 
         .... 
       ] 
     } 
     }, 
    ...

来源

2013-05-27 08:05:59 djjupa

使用json D3嵌套选择：如何将.force（）应用于嵌套元素？

回答

相关问题