Crossfilter條形圖不呈現

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).toLocaleDateString("en-GB"); 
}); 

到

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

而且group.reduceCount不採取任何參數（reduceSum確實），所以這將工作正常：

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

我還包括dc.css作爲依賴項，這有助於格式化很多。

以下是工作示例：https://jsfiddle.net/5q1dddgt/4/