1

（这是对此处提出的问题的后续问题。该问题尚未完全解决，这是一种延续，因此我发布了一个新问题）

我有一个表示树的嵌套 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用链接到其父节点的圆圈来表示下面的每个元素。

按照对其他一些问题和其他示例的回答，我设法nestedproperties通过将嵌套数据作为参数传递给 来显示每个元素，正如本问题.data()中所建议的那样。代码的核心部分如下所示：

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

这是生成的图片。正如你所看到的，圆圈被绘制在彼此之上并且没有施加力：

在此处输入图像描述

谢谢你的帮助！

4

1 回答 1

1

最后，我发现了这是如何完成的。这是一个显示现场示例的要点：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-27T08:05:59.130 回答