带水平滚动的 C3 / D3 条形图

我正在创建一个 c3 条形图，其中每个条形代表在给定的一周内加入某个计划的人数。数据只是一个对象数组，其中包含 [{week, # of people}, {week, # of people} 等]

理想情况下，我希望图表中显示最近 6 周的数据，但我希望能够水平滚动以查看过去的几周。

我看到一个答案（D3.js滚动条形图 https://stackoverflow.com/questions/23591914/d3-js-scrolling-bar-chart），但在这种情况下，滚动时轴不会保持可见 - 我想这样做。

任何帮助将非常感激。

c3.js 允许您制作“子图表”，其本质上类似于您在 Google 财经上看到的股票图表。

我怀疑你最好让子图表作为滚动机制，而不是尝试从 css 实现滚动条。

c3 子图表的优点之一是它允许为子图表设置“默认范围”。您可以做的就是使用默认的有限周数，然后用户可以根据需要操纵子图表滑块/画笔。这是一个简单的实现/虚拟示例：

轴 x 范围
http://c3js.org/reference.html http://c3js.org/reference.html

...设置子图和缩放的默认范围。

c3子图
http://c3js.org/samples/options_subchart.html http://c3js.org/samples/options_subchart.html

jsfiddle 中的工作示例
http://jsfiddle.net/y6tns4mt/1/ http://jsfiddle.net/y6tns4mt/1/

HTML

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <p>My Chart Title</p>
            <div>
                <div id="my-chart"></div>
            </div>
        </div>
    </div>
</div>

用于 c3 图表的 JavaScript

var chart = c3.generate({
    bindto: '#my-chart',
    data: {
        columns: [
            ['people', 30, 200, 100, 400, 150, 250, 40, 50, 70, 80, 90, 100, 17, 47, 51, 141]
        ],
        type: 'bar'
    },
    subchart: {
        show: true
    },
    axis: {
        x: {
            extent: [13, 16]
        }
    },
    tooltip: {
        format: {
            title: function (d) {
                return 'Week ' + d;
            }
        }
    }
});