jSon to D3js группировка данных из вложенных массивов

Question

Я очень новичок в том, чтобы что-либо делать с 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>   

Действительно оцените любые предложения, которые могут быть у вас есть!

Answer 1

Я думаю, что было бы лучше использовать вложенный выбор для создания вашей панели.

// 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 ... 

Это создаст три группы: по одной для каждой группы серверов и переводит каждый по вертикали. Каждая группа содержит данные группы, поэтому мы можем использовать данные группы для создания элементов внутри каждой группы. Кроме того, вы можете добавить заголовок, цвет фона и другие параметры для каждой группы, используя эту структуру. В этой статье содержатся концепции, которые необходимо решить по вашей проблеме: How Selections Work. С уважением,