c3.js 中的增量散点图

Question

我需要使用 c3.js 在散点图中显示数据点。数据点成批到达，我想随着新点的到达逐步更新绘图。

第一批在初始化绘图时给出，显示正常。但是当我使用流程更新情节时，较早的点会被删除。此外，X 轴不显示正确的 X 坐标。 [编辑：添加说明] 流程之后，点出现在 (3, 1), (4, 1), (5, 1) 而不是 (1.5, 1), (2.5, 1), (3.5, 1)如数据中指定的那样。]

我是不是漏掉了什么？

JsFiddle：http://jsfiddle.net/cornea/b33usb69/

var chart = c3.generate({
    data: {
        x: 'A',
        columns: [
            ['A', 1.5, 2.5, 3.5],
            ['B', 2.0, 2.0, 2.0]
        ],
        type: 'scatter',
        types: { 'B': 'scatter' }
    },
    axis: {
        x: { label: 'A', tick: { fit: true } },
        y: { label: 'B' }
    }
});

setTimeout(function () {
    chart.flow({
        columns: [
            ['A', 1.5, 2.5, 3.5],
            ['B', 1.0, 1.0, 1.0]
        ]
    });
}, 2000);

谢谢。

Answer 1

因为您的示例中 Y 轴的比例变化很大（值下降 50%），您可能需要设置 axis: { y: { min: 0 }, y: { max: 2 } } 才能看到散点移动。尝试 this jsfiddle 看看该更改是否符合您的要求。

当您使用 chart.flow 时，X 轴值会更新，如果您更改它以使用 chart.load({ ... }) 加载和重新加载图表数据，它们将保持不变。要让图表正确地流动数据，还需要做一些更多的工作来初始化 X 轴值（请参阅 flow API example），但从您的简单示例中并不清楚这就是您想要做的。

编辑:

感谢您的澄清。我无法用工作代码回答你的问题，但看到 github #865 issue for C3.js 与你的问题相关。

您可能需要考虑对数据使用不同的方法并避免 flow 以构建合适的图表。

Answer 2

不确定为什么要使用 .flow，这不是更适合时间序列数据吗？

您不能只使用 .load 将新数据点添加到图表上吗？

像这样：http://jsfiddle.net/b33usb69/20/

编辑：

如果你想把它放在同一个数组中，那么像这样：（代码未经测试）

var a = ['A_x', 1.5, 2.5, 3.5], b = ['A', 2.0, 2.0, 2.0];

var chart = c3.generate({
    data: {
        xs: { A: 'A_x' },
        columns: [
             ['A_x', 1.5, 2.5, 3.5],
            ['A', 2.0, 2.0, 2.0]
        ],
        type: 'scatter'
    },
    axis: {
        y: { min: 0, max: 3 }
    }
});

setTimeout(function () {
    a = a.concat[1.5, 2.5, 3.5];
    b = b.concat[1.0, 1.0, 1.0];
    chart.load({
        columns: [
            a,
            b
        ]
    });
}, 2000);

c3.js 中的增量散点图

Incremental scatter plot in c3.js

javascript

d3.js

c3.js