dc.js列が1つしかなく、弾性X軸がある積み上げ棒グラフが正しく表示されない

Question

dc.jsとcrossfilterを使用して積み上げ棒グラフを作成しました。私はx軸に沿って時間ディメンションを使用しており、弾力性も持たせています。しかし、スタックされた棒グラフの中にただ1つの列がある場合、グラフが正しくレンダリングされないようです（データまたは他のグラフによるクロスフィルタリングが原因である）。前

：グラフを濾過した後

無しカラムを示さないか、隠されてもよい：回避策として

、私はダミーデータとしてデータの最小値と最大値までに余分月添加しましたしかしそれでも助けにはならない。だから私は弾力のあるx軸を取り除くことにしました。しかし、弾力性のあるx軸がなければ、データがフィルタリングされたときにグラフは非常に疎く見えます。&

私は多くの記事を検索しましたが、役に立たない解決策は見つけられません。誰かが私を正しい方向に向けることができたらうれしいです。 （または類似の問題）elasticX for linear domain doesn't include the rightmost bar

dc.js取る：これは私のチャートは、現在

chart 
    .width(768) 
    .height(480) 
    .margins({ 
    left: 80, 
    top: 20, 
    right: 10, 
    bottom: 80 
    }) 
    .x(d3.time.scale()).elasticX(true) 
    .round(d3.time.month.round) 
    .alwaysUseRounding(true) 
    .xUnits(d3.time.months) 
    .brushOn(false) 
    .xAxisLabel('Months') 
    .yAxisLabel("Expected Sales (in thousands)") 
    .dimension(dimMonthYear) 
    .renderHorizontalGridLines(true) 
    .renderVerticalGridLines(true) 
    .legend(dc.legend().x(130).y(30).itemHeight(13).gap(5)) 
    .group(combinedGroup, "Understand", sel_stack(0)) 
    .stack(combinedGroup, "Propose", sel_stack(1)) 
    .stack(combinedGroup, "Negotiate", sel_stack(2)) 
    .stack(combinedGroup, "Decide", sel_stack(3)) 
    .stack(combinedGroup, "Deliver", sel_stack(4)) 
    .centerBar(true) 
    .elasticY(true) 
    .elasticX(true) 
    .renderlet(function(chart) { 
    chart.selectAll("g.x text").attr('dx', '-30').attr(
     'dy', '-7').attr('transform', "rotate(-60)"); 
    }); 

Working jsfiddle

Answer 1

私はあなたがこの問題に実行されていると思いますが、私はセットアップを持っているかでありますその境界は非常に文字通りであり、文字通りそれを計算するので、それ自身の棒の幅を考慮に入れないほどです。

この問題を回避するための一つの簡単な方法は、いくつかのパディングを追加することです：あなたは月ごとに集計されているので

.xAxisPadding(1).xAxisPaddingUnit('month') 

、これは月が計算されたドメインの左右に常に存在することを確認しますが（バーが1つだけの場合は幅0になります）。もちろん

、あなたがチャートを満たしている1つのバーで終了します：dc.jsこの時よくなるまで、あなたは、preRedrawに、手動でドメインを計算する場合があります

。あなたのフィドルの

フォーク：https://jsfiddle.net/gordonwoodhull/97h8kd5g/2/