javascript - C3折线图: compress or break interval between distant points

Question

我想改进这个 C3 图表。问题是两点之间的间隔很大，我想压缩或打破它，同时还显示一条线来指示 x 轴上有中断。我可以用 C3 或 D3 来做到这一点吗？

 var chart = c3.generate({
   data: {
     x: 'x',
     columns: [
       ['x', '2010-01-01', '2010-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-06'],
       ['data1', 30, 200, 100, 400, 150, 250],
     ]
   },
   axis: {
     x: {
       type: 'timeseries',
       tick: {
         format: '%Y-%m-%d'
       }
     }
   }
 });

<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.css'>
<div id="chart"></div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js'></script>

Answer 1

这是进入“令人讨厌的黑客”领域的漂移，但如果您将轴设置为类别而不是时间序列，则值将均匀分布。然后，您可以在适当的点(查看已知数据，或使用函数来分析和插入它们)添加虚拟数据点，其类别名称例如类似于轴中的中断的“//”。然后在 onRendered 函数中将这些值向上移动到轴，并设置 connectNull 设置以保持线条连续。

当然，这并不能做各种各样的事情，比如保留您可能感兴趣的时间点的本地分布，现在您的点位于刻度之间，而不是在刻度上方，但这是一个选项。 .

 var chart = c3.generate({
   data: {
     x: 'x',
     columns: [
       ['x', '2010-01-01', '2010-01-02', '//', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-06'],
       ['data1', 30, 200, null, 100, 400, 150, 250],
     ]
   },
   axis: {
     x: {
       type: 'category',
       tick: {
         format: '%Y-%m-%d'
       }
     }
   },
 line: {
     connectNull: true,
    },
 onrendered: function () {
    d3.selectAll("tspan")
        .filter (function(d) { return d.splitted === "//"; })
        .attr ("dy", "0em")
        .style ("font-size", "2.5em")
    ;
 }
});

<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.css'>
<div id="chart"></div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js'></script>