2016-03-22 16 views
1

コンポジットバー/ラインチャートがありますが、最終的なバーを除いて正しく表示されています。データには、8つの日付と2つの値のグループのディメンションが含まれています.1つはテーバー用、もう1つは折れ線グラフ用です。私はディミニオンとグループの内容をすべて調べ、すべて正しいものにしました。DC.JSコンポジットチャートに最後の値が表示されない

グラフの8番目のsvgは存在しますが、バーは表示されません。添付の画像を参照してください。 SVGインスペクタでは、対応する棒がグラフに表示されませんが、矩形は高さと幅で定義されています。 SVG Inspector shows a rect is defined with height and width though a corresponding bar is not displayed on the chart

私は.centerBarと.elasticX、.xAxisPaddingでプレイしていますが、成功しませんでした。私はまた、グラフの寸法と余白を変更しようとしました。チャートを表示するために使用

コード:

var firstWeek = d3.min(data, function (d) { return d.Week; }); 
var lastWeek = d3.max(data, function (d) { return d.Week; }); 

     var compositeKPIChart = dc.compositeChart("#W-chart"); 

     var KPIbChart = dc.barChart(compositeKPIChart); 

     var KPIlChart = dc.lineChart(compositeKPIChart); 

     compositeKPIChart.width(width) 
       .height(0.9*width/2) 
       .margins({ top: 10, right: 50, bottom: 30, left: 30 }) 
       .dimension(weekDim) 
       .x(d3.time.scale().domain([firstWeek, lastWeek])) 
       .xUnits(d3.time.mondays) 
       .y(d3.scale.linear().domain([0, 100])) 
       .compose([ 
        dc.barChart(compositeKPIChart).group(barGroup, "%"), 
        dc.lineChart(compositeKPIChart).group(lineGroup, "Standard") 
       ]) 
       .brushOn(false) 
       .xAxis().ticks(d3.time.mondays).tickFormat(d3.time.format("%d %b")); 

答えて

1

要素が存在しますが、表示されていない場合は、私がチェックしたい最初のものは、クリッピング矩形です。デバッガでそれを削除するか、リンクの名前を変更して参照が壊れるようにして、不足しているバーを表示することができます。

しかし、それはなぜ最初に欠けているのか説明しません。おそらくあなたのXドメインが小さすぎることが起こっているのでしょうか?バーは対応するティックと左揃えになっています(ただし、ラインのポイントには幅がありません)ので、バーを表示するためにはドメインの先頭に1週間追加する必要があります。

dc.jsは、ほんの少しの場合を除いて、文字通りドメインを取る傾向があります。

私が驚いているのは、centerBarがこのような場合に役に立ちませんでした。

関連する問題