Javascript jSon到D3js从嵌套数组分组数据

我对使用d3和jSon做任何事情都很陌生。下面是我试图从json中获取的数据图片，我只想知道我是否走上了正确的道路

基本上，每个状态组的内部都会有更多的服务器，而不是像现在这样的服务器，我们的想法是为一个服务器绘制矩形图，并将这些服务器很好地列在彼此旁边

我一直在阅读很多教程，并试图浏览其他人可能遇到的类似问题，但到目前为止，我真的没有运气

我正在尝试提取的jSon数据

[
{
    "status": "ok",
    "servers":
            [
                {
                    "id": "VR01",
                    "servername": "Server_1",
                    "cpu": 45, "mem": 25,
                    "diskIO": 0, "bandwith": 200
                }

            ]
},
{
    "status": "attention",
    "servers":
            [
                {
                    "id": "VR10",
                    "servername": "Server_10",
                    "cpu": 55, "mem": 35,
                    "diskIO": 1, "bandwith": 2000
                }
            ]

},
{
    "status": "warning",
    "servers":
            [
                {
                    "id": "VR02",
                    "servername": "Server_02",
                    "cpu": 98, "mem": 85,
                    "diskIO": 1,
                    "bandwith": 2000
                }
            ]

},
{
    "status": "dead",
    "servers":
            [
                {
                    "id": "VR20",
                    "servername": "Server_20",
                    "cpu": 0, "mem": 0,
                    "diskIO": 0,
                    "bandwith": 0
                }
            ]

}

]

D3位

   <script> 

      var width = ("width", 1000);
      var height = ("height", 800);



    d3.json("mydata.json", function(data) {

        var canvas = d3.select("body").append("svg")
             .attr("width", width)
             .attr("height", height)


      var status = function sortData(data){

          for (i = 0; i < d.length; i++) {

                if(d.status ==="ok")
                    canvas.selectAll("rect")
                    .data(d.server)
                    .enter()
                        .append("rect")
                        .attr("x", 25)
                        .attr("y", function(d, i){return 25 * i;})
                        .attr("fill", "purple")
                  }

              }



          })
    </script>          

变量宽度=（“宽度”，1000）；
变量高度=（“高度”，800）；
d3.json（“mydata.json”，函数（数据）{
var canvas=d3.select（“body”）.append（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
var状态=功能排序数据（数据）{
对于（i=0；i

---

非常感谢您提出的任何建议

我认为最好使用嵌套选择来创建仪表板

// Create one group for each server group
var serverGroup = svg.selectAll('g')
   .data(data)
   .enter()
   .append('g')
   .attr('transform', function(d, i) { return 'translate(0, ' + 50 * i + ')');

// Create the inner elements for each group
var servers = serverGroup.selectAll('rect')
    .data(function(d) { return d.servers; })
    .enter()
    .append('rect')
    // ... more settings here ...

---

这将创建三个组，每组服务器一个，并垂直转换每个组。每个组都包含组数据，因此我们可以使用组数据在每个组内创建元素。此外，您还可以使用此结构为每个组添加标题、背景色和其他设置。本文包含解决问题所需的概念：。您好，

您能具体一点吗？你在挣扎什么，什么不起作用？