C3 范围未按预期工作答案

【问题标题】：C3 Extent not working as expectedC3 范围未按预期工作
【发布时间】：2018-05-11 09:36:45
【问题描述】：

我正在创建一个非常简单的折线图，并希望初始负载是所有可用数据的一部分，所以我在 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"
            }
        }
    },

但它被忽略了。该图表仅显示了数据的全部范围。

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

这是完整代码and here's a fiddle (I tried a code snippet but didn't work)

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

【问题讨论】：

标签： d3.js c3.js

【解决方案1】：

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

我切换到C3 和D3 的早期版本（见下文），它可以正常工作。

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

【讨论】：