2017-02-01 9 views
1

私は自分自身のデータを使用して複雑な縮小の例を再作成しようとしましたが、レンダリングするグラフを取得できません。dc.js barChartはレンダリングしません

私は、これらの機能をコピー:

function groupArrayAdd(keyfn) { 
    var bisect = d3.bisector(keyfn); 
    return function(elements, item) { 
     var pos = bisect.right(elements, keyfn(item)); 
     elements.splice(pos, 0, item); 
     return elements; 
    }; 
    } 

    function groupArrayRemove(keyfn) { 
    var bisect = d3.bisector(keyfn); 
    return function(elements, item) { 
     var pos = bisect.left(elements, keyfn(item)); 
     if (keyfn(elements[pos]) === keyfn(item)) 
     elements.splice(pos, 1); 
     return elements; 
    }; 
    } 

    function groupArrayInit() { 
    return []; 
    }; 

、その後、私の大きさ、グループとチャートを設定します。

var monthKey = function(d) { 
    return d.month; 
    }; 

    var scoreValue = function(d) { 
    return d.points_per_date; 
    }; 

    var monthDimension = ndx.dimension(monthKey); 

    var monthAvgGroup = monthDimension.group().reduce(groupArrayAdd(monthKey), groupArrayRemove(monthKey), groupArrayInit); 


    function sumPoints(kv) { 
    return d3.sum(kv.value, scoreValue); 
    }; 

    var accessors = { 
    sum: sumPoints 
    }; 


    monthChart 
    .width(400) 
    .height(300) 
    .x(d3.time.scale().domain([d3.min(data, function(d) { 
     return d.month 
    }), d3.max(data, function(d) { 
     return d.month 
    })])) 
    .xUnits(d3.time.months) 
    .valueAccessor(sumPoints) 
    .elasticY(true) 
    .brushOn(true) 
    .controlsUseVisibility(true) 
    .dimension(monthDimension) 
    .group(monthAvgGroup); 

フィドルがhttps://jsfiddle.net/santoshsewlal/pa524yLc/です。 私はvalueAccessorを設定するのが面倒だと思います。
提案がありますか?

おかげ

答えて

1

それはちょうど、タイプミスだ - HTMLであなたはそれだけでtest-monthあるべき時にバーがID #test-monthをグラフました。ハッシュマークはセレクタ用です。

私はまたdc.jsは非常に文字通りドメインを取得して、自動的にバー用のスペースを許可していないので、1ヶ月でのxドメインのトップを相殺することをお勧めしたい:

.x(d3.time.scale().domain([d3.min(data, function(d) { 
    return d.month 
}), d3.time.month.offset(d3.max(data, function(d) { 
    return d.month 
}),1)])) 

https://jsfiddle.net/pa524yLc/6/

棒の間のスケールの違いは本当に巨大です - 棒の3つは見落とされているように見えますが、実際には小さいです。欲しいものはlogarithmic scales worked betterです。

関連する問題