如何用d3表示可变嵌套深度数组

Question

我有一个数据集，是一个数组。数据集就是这种结构。

    [{

    "rowLabel": "Alimentary Sytem",
    "values": [{
        "columnLabel": "Microarray",
        "value": "High"
    }, {
        "columnLabel": "IHC",
        "value": "High"
    }],
    "children": [

        {
            "rowLabel": "Stomach",
            "values": [{
                "columnLabel": "Microarray",
                "value": "Moderate"
            }, {
                "columnLabel": "IHC",
                "value": "Moderate"
            }]
        }, {
            "rowLabel": "Mouth",
            "values": [{
                "columnLabel": "Microarray",
                "value": "High"
            }, {
                "columnLabel": "IHC",
                "value": "High"
            }],
            "children": [{
                    "label": "Tongue",
                    "values": [{
                        "columnLabel": "Microarray",
                        "value": "High"
                    }, {
                        "columnLabel": "IHC",
                        "value": "Negative"
                    }]
                }
            ]
        }
    ]
}, {
    "rowLabel": "Muscle",
    "values": [{
        "columnLabel": "Microarray",
        "value": "Low"
    }, {
        "columnLabel": "IHC",
        "value": "Low"
    }],
    "children":[{
            "rowLabel": "tendon",
            "values": [{
                "columnLabel": "Microarray",
                "value": "Moderate"
            }, {
                "columnLabel": "IHC",
                "value": "Moderate"
            }]
        }]

}]

‘我想用d3以这种格式展示这一点。

​

<ul>
  <li>Alimentry Canal
    <ul>
      <li>Stomach</li>
      <li>Mouth
      <ul>
        <li>Tongue</li>
      </ul>
      </li>
    </ul>
  </li>
  <li>Muscles</li>
</ul>

我尝试使用对d3选择的递归调用来完成此操作，但它一直告诉我groupData未找到，并在嵌套的第一层结束。

​

Answer 1

我会去找下面的片段。基本上，我们所做的是：

1. 将数组扁平化并向每个对象添加level属性。
2. 为所有这些人创建文本
3. 基于级别设置缩进
4. 根据索引垂直放置它们。

注意，alignment-base决定了文本在行中的位置。

将其设置为hanging使得如果我将y-position设置为0，您将看到文本。

您可以阅读更多关于它的这里，您可以了解到它们是什么样子的这里。

​

 var tree = [{

   "rowLabel": "Alimentary Sytem",
   "values": [{
     "columnLabel": "Microarray",
     "value": "High"
   }, {
     "columnLabel": "IHC",
     "value": "High"
   }],
   "children": [

     {
       "rowLabel": "Stomach",
       "values": [{
         "columnLabel": "Microarray",
         "value": "Moderate"
       }, {
         "columnLabel": "IHC",
         "value": "Moderate"
       }]
     }, {
       "rowLabel": "Mouth",
       "values": [{
         "columnLabel": "Microarray",
         "value": "High"
       }, {
         "columnLabel": "IHC",
         "value": "High"
       }],
       "children": [{
         "rowLabel": "Tongue",
         "values": [{
           "columnLabel": "Microarray",
           "value": "High"
         }, {
           "columnLabel": "IHC",
           "value": "Negative"
         }]
       }]
     }
   ]
 }, {
   "rowLabel": "Muscle",
   "values": [{
     "columnLabel": "Microarray",
     "value": "Low"
   }, {
     "columnLabel": "IHC",
     "value": "Low"
   }],
   "children": [{
     "rowLabel": "tendon",
     "values": [{
       "columnLabel": "Microarray",
       "value": "Moderate"
     }, {
       "columnLabel": "IHC",
       "value": "Moderate"
     }]
   }]

 }]


 function flatten(arr, level) {

   return arr.reduce(function(flat, toFlatten) {
     toFlatten.level = level;
     var result = flat.concat(toFlatten);
     if (Array.isArray(toFlatten.children)) {
       result = result.concat(flatten(toFlatten.children, level + 1));
     }
     return result;
   }, []);
 }

var flatTree = flatten(tree, 0);
var indentWidth = 50;
var lineHeight = 20;

var svg = d3.select('#svg').append('svg').attr("width", 200).attr("height", 500).append('g');

var texts = svg.selectAll("text")
            .data(flatTree)
            .enter()
            .append('text')
            .text(function(d){ 
              return d.rowLabel; 
            })
            .attr('alignment-baseline', 'hanging')
            .attr('x', function(d){
               return indentWidth * d.level;
            })
            .attr('y', function(d, i){
               return lineHeight * i;
            });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

<div id="svg"></div>

​

*：*考虑到OP的最后一条评论，我认为这是最合适的解决方案：可折叠树。