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

您现在可以从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上的this post。看起来这是在2014年9月添加的。

Answer 2

如果您希望将<div class="container myMapNavBar"> <nav class="navbar navbar-default" role="navigation"> this is the navbar </nav> </div> <div class="container" id="myScrollBox"> this is a test box </div>用于x轴，将.myMapNavBar { position: absolute; left:0; right:0; top: 15px; z-index: 1; } #myScrollBox { position: absolute; top: 120px; width: 380px; right: 30px; z-index: 1; background-color: rgba(255, 255, 255); border-radius: 5px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.5); }用于y，并忽略data1，则可以使用此选项：

data2

经过一番游戏后，我无法使用data3选项加载TSV文件，但您可以使用基础D3解析TSV并将其提供给图表对象。

c3.js scatterplot示例和tsv文件

2 个答案: