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>