javascript - Rickshaw / D3でx軸の最小/最大を設定するにはどうすればよいですか?

Question

「今日」の時間ベースのデータの線形グラフを表示したいと考えています。正午には、シリーズにそれ以上のデータが含まれていないため、グラフの半分だけが取り込まれます。人力車に既存のデータの時間枠だけでなく、完全なチャートを表示させるにはどうすればよいですか?

Answer 1

私は同じ問題を抱えていてnull、必要な最小および最大の x 値を持つデータ ポイントを追加することで解決しました。

<div id="chart"></div>
<div id="x_axis"></div>
<script>
var graph = new Rickshaw.Graph( {
    element: document.getElementById('chart'), 
    width: 500,
    height: 200,
    renderer: 'line',
    series: [
        {   data: [         
                { x: -5, y: null},
                { x: 10, y: null},
            ]
        },   
        {   color: 'steelblue',         
            data: [
                { x: 0, y: 40 },
                { x: 1, y: 49 },
                { x: 2, y: 38 },
                { x: 3, y: 30 },
                { x: 4, y: 32 } ]
        }
    ]    
});  

var x_ticks = new Rickshaw.Graph.Axis.X({
    graph: graph,
    orientation: 'bottom',
    element: document.getElementById('x_axis'),
    pixelsPerTick: 100,
});

graph.render();
</script>

これは、x 軸が -5 から 10 で、データが 0 から 4 の間のグラフを示しています。