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文件；基于此，我认为我可以只使用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

您现在可以从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'
                }
            }
        }
    });
}

请参阅github上的这篇文章。看起来这是在2014年9月添加的。

Answer 2

如果您希望对x轴使用data1，对y使用data2，并忽略data3，则可以使用以下命令：

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

玩了一会儿之后，我也无法使用url选项加载TSV文件，但您可以使用基本D3来解析TSV并将其提供给图表对象。