c3.js Пример диаграммы рассеяния и файл tsv

Question

Новое на C3 здесь. Я пытаюсь сделать простой разброс. Я думал, что это будет работать (c3_test.csv это одни и те же набор данных из образцов.)

var chart = c3.generate({ 
     data: { 
      url: 'c3_test.csv',  
     x: 'data1', 
     columns: ['data2'] 
     type: 'scatter' 
     } 
    }); 

, но выглядит это не путь. Это работает,

var chart = c3.generate({ 
     data: { 
      url: 'c3_test.csv',  
      filter: function (d) { 
       return d.id !== 'data1'; 
      }, 
      x:'data2', 
      type: 'scatter' 
     }, 

Однако, было бы полезно знать, как сделать первый метод, также дать желаемый результат. Кроме того, я пытаюсь загрузить файл tsv; основанный на this, я думал, что могу просто использовать интерфейс url, однако это, похоже, не работает. Опять же, я был бы признателен за любую помощь в этом. Я использую https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.js. Мой файл csv (tsv) находится ниже.

TIA, 
C.S.N 

data1,data2,data3 
20,180,400 
40,150,310 
70,120,470 
50,170,400 
80 200 380 

Answer 1

Если вы хотите использовать data1 для оси х, data2 для у, и игнорировать data3, вы можете использовать это:

var chart = c3.generate({ 
    data: { 
     url: 'c3_test.csv', 
     x: 'data1', 
     type: 'scatter', 
     hide: ['data3'] 
    }, 
    legend: { 
     hide: ['data3'] 
    } 
}); 

После небольшой игры вокруг, я не был в состоянии получить TSV-файл для загрузки с помощью опции url, но вы можете использовать базовый D3 для разбора TSV и передачи его в объект диаграммы.

Answer 2

You может загрузить из файлов TSV. Для этого вам нужно добавить свойство mimetype в объект данных как tsv.

Вот пример:

function glucoseInit() { 
    var chart = bb.generate({ 
     bindto: '#divGlucoseScores', 
     data: { 
      url: 'glucoseScores.tsv', 
      mimeType: 'tsv', 
      x: 'date', 
      xFormat: '%Y-%m-%d %H:%M:%S', // how the date is parsed 
      y: 'score', 
      names: { 
       date: 'Date', 
       score: 'Blood glucose (mg/dL)' 
      } 
     }, 
     axis: { 
      x: { 
       type: 'timeseries', 
       tick: { 
        format: '%m/%d/%Y' 
       } 
      } 
     } 
    }); 
} 

См this post на GitHub. Похоже, что это было добавлено в сентябре 2014 года.