C3.js 从 CSV 中排除列答案

【问题标题】：C3.js exclude columns from CSVC3.js 从 CSV 中排除列
【发布时间】：2014-12-18 18:12:07
【问题描述】：

我正在使用 C3.JS 通过从提供的 CSV 文件加载数据来创建多系列折线图。我可以绘制图表，但我还没有找到是否可以仅绘制 CSV 中的某些列，我的图表正在绘制所有 CSV 列。

我的 CSV 如下所示：

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

而我只绘制以年龄为 X 轴的百分位数（P* 列）列的线，并排除性别、L、M 和 S 列。

目前我的图表如下所示：

一种解决方案是从 CSV 文件中删除列，但是这是不可能的，因为我将需要其他值来进行其他计算，并且我希望将所有数据保存在一个文件中。

我的 C3.js 代码如下所示：

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

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

我不确定是否有 c3.js 配置或方法可以这样做，或者需要一个 javascript 方法。

【问题讨论】：

不确定这个解决方案，但无论如何你必须向文件的列/键添加过滤器-->d3.csv("yourfile.csv", function(csv) { csv = csv.filter(function(key) { return key != "Sex" && key != "L" && key != "M" && key != "S" ; }); });
写完我的问题后，我也开始考虑使用 d3.csv 来做这件事。谢谢，请将您的评论作为答案进行投票。

标签： javascript d3.js graph c3.js

【解决方案1】：

您必须为文件的列/键添加过滤器

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

【讨论】：

【解决方案2】：

受@Armani 的启发，我最终这样做了，这是将 d3.csv 函数与 c3 结合使用，因为我没有找到使用 c3 URL 的方法。

首先我使用 D3 将 CSV 文件加载到 JSON 对象中
根据需要修改数据（不过滤）
为 C3 提供 json 对象
使用 c3 调用中的“keys”属性仅显示我想要的字段。

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
      }
    });

  }
});

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"&gt;&lt;/script&gt;

【讨论】：