Datenaggregation in c3js

Question

Gibt es eine Möglichkeit, die Daten in C3-Charts zu aggregieren? Wenn der JSON mehrere Datenelemente derselben Kategorie enthält, werden die Daten als mehrere Punkte in den Diagrammen dargestellt, wo sie aggregiert und als einzelner Punkt im Diagramm angezeigt werden sollen. Angeschlossen sind die C3-Diagramme und das erwartete Diagrammformat. In dem Beispiel: "Name 1" zeigen einen einzelnen Punkt bei 300 als Upload, wo als Ion C3 zeigen Sie einen Punkt bei 200 und den anderen bei 100 für die gleichen.

Kode:

var chart = c3.generate({ 
      bindto:'#png-container', 
      data: { 
       json: [ 
       {name: 'name1', upload: 200, download: 200, total: 400}, 
       {name: 'name1', upload: 100, download: 300, total: 400}, 
       {name: 'name2', upload: 300, download: 200, total: 500}, 
       {name: 'name3', upload: 400, download: 100, total: 500}, 
       ], 
       keys: { 
       x: 'name', // it's possible to specify 'x' when category axis 
       value: ['upload', 'download'], 
       }, 
       groups: [ 
       ['name'] 
       ] 
      }, 
      axis: { 
       x: { 
       type: 'category' 
       } 
      } 
     }); 

Ausgabe des obigen Codes:

Erwartete Ausgabe:

Answer 1

Nicht so weit in c3 gebaut, wie ich bewusst bin. Sie können den Verschachtelungsoperator von d3 verwenden, um die json-Daten zu aggregieren, bevor Sie sie an c3 übergeben.

var json = [ 
      {name: 'name1', upload: 200, download: 200, total: 400}, 
      {name: 'name1', upload: 100, download: 300, total: 400}, 
      {name: 'name2', upload: 300, download: 200, total: 500}, 
      {name: 'name3', upload: 400, download: 100, total: 500}, 
      ]; 

    var agg = function (json, nestField) { 
     var nested_data = d3.nest() 
      .key(function(d) { return d[nestField]; }) 
      .rollup(function(leaves) { 
       // Work out the fields we're not nesting by 
       var keys = d3.merge (leaves.map (function(leaf) { return d3.keys(leaf); })); 
       var keySet = d3.set(keys); 
       keySet.remove (nestField); 
       var dataFields = keySet.values(); 

       // total these fields up 
       // console.log(leaves, dataFields); // just for testing 
       var obj = {}; 
       dataFields.forEach (function (dfield) { 
        obj[dfield] = d3.sum(leaves, function(d) {return d[dfield];}); 
       }); 
       return obj; 
      }) 
      .entries(json); 

     // return to original json format 
     var final_data = nested_data.map (function(nestd) { 
      nestd.values[nestField] = nestd.key; 
      return nestd.values; 
     }); 

     return final_data; 
    }; 

    var chart = c3.generate({ 
     bindto:'#png-container', 
     data: { 
      json: agg(json, "name"), 
      keys: { 
      x: 'name', // it's possible to specify 'x' when category axis 
      value: ['upload', 'download'], 
      }, 
      groups: [ 
      ['name'] 
      ] 
     }, 
     axis: { 
      x: { 
      type: 'category' 
      } 
     } 
    }); 

https://jsfiddle.net/8uofn7pL/2/

hoppla, da an die falsche Geige verbunden