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/