C3范围未按预期工作

Question

我正在创建一个非常简单的线条图，并希望初始加载是所有可用数据的一部分，因此在x轴上设置extent：

以下是我所设定的范围：

    axis: {
        "x": {
            "type": "timeseries",
            "tick": {
                "format": "%d/%m/%Y"
            },
            "label": {
                "text": "X Label",
                "position": "outer-center"
            },
            "padding": {
                "left": 0
            },
            "extent": ["2017-10-01", "2017-10-05"]
        },
        "y": {
            "label": {
                "text": "Y Label",
                "position": "outer-middle"
            }
        }
    },

但它被忽视了。图表只是显示数据的全部范围。

，这是生成图表时显示数据子集的正确方法吗？

这是完整的代码这里有一个小提琴(我尝试了一个代码片段，但没有成功)

const columnData = [
    ["x", "2017-10-01", "2017-10-02", "2017-10-03", "2017-10-04", "2017-10-05", "2017-10-06", "2017-10-07", "2017-10-08", "2017-10-09", "2017-10-10", "2017-10-11", "2017-10-12", "2017-10-13", "2017-10-14", "2017-10-15", "2017-10-16"],
    ["data0", -55, -50, 11, -18, 39, 65, -84, -15, 14, 81, -79, 67, -48, 38, 99, -60],
    ["data1", 28, 14, -99, -33, 55, 71, 58, 66, 7, -88, 99, -37, -7, 59, -13, -57],
    ["data2", 14, 6, -9, 25, 42, -93, -6, 67, -35, 88, 36, 45, 42, 78, 51, -88],
    ["data3", 31, -73, -69, 45, 55, 15, -48, 41, -64, -12, -6, 14, -69, 16, -65, -73],
    ["data4", 98, 60, 82, 80, -62, -47, 55, 87, -65, 37, 22, 30, 93, -69, -88, 33],
    ["data5", -98, 57, 71, -25, -40, 13, 72, -90, 71, -71, -21, -9, -90, 73, -94, 100]
];
const generateChart = function() {
    const chart = c3.generate({
        data: {
            "x": "x",
            "columns": columnData,
            "type": "line"
        },
        axis: {
            "x": {
                "type": "timeseries",
                "tick": {
                    "format": "%d/%m/%Y"
                },
                "label": {
                    "text": "X Label",
                    "position": "outer-center"
                },
                "padding": {
                    "left": 0
                },
                "extent": ["2017-10-01", "2017-10-05"]
            },
            "y": {
                "label": {
                    "text": "Y Label",
                    "position": "outer-middle"
                }
            }
        },
        zoom: {
            enabled: true
        },
        transition: {
            duration: 100
        },
        legend: {
            show: false
        },
        subchart: {
            show: true
        },
        size: {
            height: 500
        },
        grid: {
            x: {
                show: true
            },
            y: {
                show: true
            }
        }
    });
};

generateChart();

Answer 1

截至2018年5月11日，这似乎是一个bug：https://github.com/c3js/c3/issues/2357

我切换到了C3和C3 version 0.4.10的早期版本(见下文)，它可以正常工作。

我现在使用的是C3 version 0.4.10和D3 version 3.5.0