Crossfilter barchartはレンダリングしません

Question

CrossfilterとJSの新機能です。なぜこのバサルトがレンダリングされないのか分かりません。私はいくつかの日付形式を試しました。私のjsfiddleへのリンクは以下の通りです。助けてください。

基本的には、JSON形式のローンデータセットを読み込み、時間の経過とともにカウントダウンすることを試みています。

https://jsfiddle.net/5q1dddgt/2/

<div id="time-chart"></div> 


/** 
* Created on 3/13/17. 
*/ 
var mortgageJson = [{ 
    "index": 0, 
    "full_fips": "04013", 
    "defaulted_balance": 0.0, 
    "original_balance": 148000.0, 
    "county_name": "Maricopa County", 
    "state": "AZ", 
    "oltv": 79, 
    "dti": 30.0, 
    "originationMth": "1999-02-01T00:00:00.000Z", 
    "defaultRate": 0.0 
}, { 
    "index": 1, 
    "full_fips": "04021", 
    "defaulted_balance": 0.0, 
    "original_balance": 148000.0, 
    "county_name": "Pinal County", 
    "state": "AZ", 
    "oltv": 79, 
    "dti": 30.0, 
    "originationMth": "1999-02-01T00:00:00.000Z", 
    "defaultRate": 0.0 
}]; 

var mortgageSummary = mortgageJson; 
var dateformat=d3.time.format("%m-%d-%Y"); 
mortgageSummary.forEach(function(d) { 
    d.originationMonth = new  Date(d.originationMth).toLocaleDateString("en-GB"); 
}); 

var ndx = crossfilter(mortgageSummary); 
var dateDim = ndx.dimension(function(d) { 
    return d["originationMonth"]; 
}); 

var originationByTime = dateDim.group().reduceCount(function(d) {  return d.originationMonth;}); 
var totalOrigination = ndx.groupAll().reduceSum(function(d) { 
return d["original_balance"]; 
}); 

var max_county = originationByTime.top(1)[0].value; 
var minDate = dateDim.bottom(1)[0]["originationMonth"]; 
var maxDate = dateDim.top(1)[0]["originationMonth"]; 
console.log(minDate); 
console.log(maxDate); 

var timeChart = dc.barChart("#time-chart"); 

timeChart 
    .width(600) 
    .height(160) 
    .margins({ 
    top: 10, 
    right: 50, 
    bottom: 30, 
    left: 50 
}) 
.dimension(dateDim) 
.group(originationByTime) 
.transitionDuration(500) 
.x(d3.time.scale().domain([minDate, maxDate])) 
.xUnits(d3.time.days) 
.elasticX(true) 
.elasticY(true) 
    .xAxisLabel("Year") 
    .yAxis().ticks(4); 
dc.renderAll(); 

Answer 1

ブラウザのコンソールを見て、あなたは問題の一部が表示されます。 firebug-liteをインクルードすると、多くのエラーが発生します。私はあなたのブラウザに含まれている開発者ツールを使用することをお勧めします。

その他の変更：

いずれかを取ることはありませんあなたはあなたの次元ではなく、文字列として実際の日付オブジェクトをしたいので、私は

mortgageSummary.forEach(function(d) { 
    d.originationMonth = new Date(d.originationMth); 
}); 

そしてgroup.reduceCountに

mortgageSummary.forEach(function(d) { 
    d.originationMonth = new Date(d.originationMth).toLocaleDateString("en-GB"); 
}); 

を変更議論（reduceSum）、これは正常に動作します：

var originationByTime = dateDim.group().reduceCount(); 

私は依存関係としてdc.cssも含めました。これは書式設定に多くの助けとなります。

ここで働い例です：偉大な答えをし、あなたの時間のためのhttps://jsfiddle.net/5q1dddgt/4/