C3折线图：远点之间的压缩或折断间隔

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>