动态更改刻度值，c3js

Question

我在 c3js 中有一个条形图，它在 x 轴上使用类别刻度。我想显示的刻度值是在加载图表时设置的：

    axis: {
      x: {
        tick:{
            rotate: -35,
            values: getTicks(displayData), //Return the tick values
            multiline:false
        },
        type: 'categorized'
      }
    }

在加载时手动设置刻度的原因是我需要稍后更新它们。

我需要允许用户动态更新 x 轴范围，而不加载新数据，并且我希望显示的刻度数保持不变，但显然具有不同的值。

要更改 x 轴范围，我使用此函数：

chart.axis.range({min: {x: minRange}, max: {x: maxRange}});

没有调用的函数chart.axis.values。关于如何动态更改刻度值的任何想法？

编辑 - 非常清楚，我不希望更新图表的值。这包括 x 和 y 轴值。我只想更改显示的刻度。

Answer 1

像这样的东西应该有效。

axis: {
    x: {
        type: 'timeseries',
        tick: {
            values: function(x) { return customTicks(x) },
            format: function(x) { return customFormat(x); },
        }
    }
}

customTicks()必须返回一个日期数组才能正常工作。

function customTicks(x) {
    start = x[0];
    end = x[1];
    result = [];
    for (var i = new Date(start); i <= end; i.setDate(i.getDate() + 1)) {
        result.push(new Date(i));
    }
    return result;
}

customFormat()获取日期并返回该日期的字符串。这使您可以根据需要灵活地自定义格式。

function customFormat(x) {
}

它可能不是特别优雅，但可以完成工作。这种方法的好处之一是您可以在多个图表上使用相同的函数，并且它们将始终表现出相同的行为。

这种方法的问题#1是它似乎需要customTicks()每个数据点，就像它对customFormat().

问题#2是它会产生很多这样的错误：

d3.v3.min.js:1 [违规] 向滚动阻塞“touchstart”事件添加非被动事件侦听器。考虑将事件处理程序标记为“被动”以使页面响应更快。请参阅https://www.chromestatus.com/feature/5745543795965952

这已经在 Stackoverflow 上被标记为向滚动阻止“touchstart”事件添加非被动事件侦听器