C3.js exclude columns from CSV

问题:

I am creating a multiple series line graph with C3.JS by loading the data from a provided CSV file. I can plot the graph however I have not found yet if it is possible to only plot certain columns from the CSV, my graph is plotting all the CSV columns.

My CSV look like this:

Sex,Age,L,M,S,P3,P5,P10,P25,P50,P75,P90,P95,P97
2,0,-1.298749689,34.7115617,0.046905108,31.93019666,32.25089861,32.75948527,33.65186554,34.7115617,35.85124044,36.9534983,37.65137722,38.12110271
2,0.5,-1.440271514,36.03453876,0.042999604,33.38070525,33.68743507,34.17345861,35.02508397,36.03453876,37.11806755,38.16405088,38.82535049,39.27005698
2,1.5,-1.581016348,37.97671987,0.038067862,35.48627093,35.77560367,36.23325692,37.03281566,37.97671987,38.9853304,39.95458524,40.56517149,40.97482424
2,2.5,-1.593136386,39.3801263,0.035079612,36.98550023,37.26521982,37.70685493,38.47603153,39.3801263,40.34145495,41.2606303,41.83732218,42.22321458

And I which to only plot the lines for the percentiles (P* columns) columns with the Age as the X axis, and exclude the Sex, L, M and S columns from being plotted.

currently my graphs looks like this:

One solution is to remove the columns from the CSV file however this will not be possible as I will need the other values latter for other computations and I wish to keep all data in one file.

My C3.js code looks like this:

var chart = c3.generate({
    data: {
                x: 'Age',
        url: '/data/cdc/cdc_female_hcageinf.csv',
                type: 'line'

        },
    tooltip: {
        show: false
    },
            point: {
        show: false
    }
});

I am not sure if there is a c3.js configuration or method to do so, or a javascript method will be necessary.

回答1:

Inspired by @Armani I've ended up doing this, which is a combination of using d3.csv function with c3, as I didn´t find a way to do it with c3 URL.

1. First I used D3 to load the CSV file into a JSON object
2. Modify the data as required (not filtering)
3. Feed C3 with the json object
4. Use the "keys" property inside the c3 call to only show the fields I want.

d3.csv( _dataPath, function ( d ) {

  var data = d;

  if ( configdata.axis.x.source_units == "meses" && configdata.axis.x.units == "años" )
  {
    data[ configdata.axis.x.property_key ] = data[ configdata.axis.x.property_key ] / 12;
  }

  return data;

}, function( error, data ) {

  if (!error)
  {

    var percentiles = [];
    configdata.percentilesData.forEach( function( p ) {
      percentiles.push( p.name );
    });

    var x_axis_label = configdata.axis.x.label + ' (' + configdata.axis.x.units + ')';
    var y_axis_label = configdata.axis.y.label + ' (' + configdata.axis.y.units + ')';

    var chart = c3.generate({
      bindto: '#chart',
      data: {
        json: data,
        type: 'line',
        keys: {
          x: configdata.axis.x.property_key,
          value: percentiles
        }
      },
      axis: {
        y: {
          label: y_axis_label
        },
        x: {
          label: x_axis_label
        }
      },
      tooltip: {
        show: false
      },
      point: {
        show: false
      }
    });

  }
});

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

回答2:

you have to add a filter to your file's columns/keys

d3.csv("yourfile.csv", function(csv) {
 csv = csv.filter(function(key) { 
  return key != "Sex" && key != "L" && key != "M" && key != "S" ;
   }); 
 });