Crossfilter条形图不呈现
我是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();
看看浏览器控制台,你会看到一些问题。 你包含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/
链接地址: http://www.djcxy.com/p/32817.html上一篇: Crossfilter barchart does not render
下一篇: How to create a group from a group in crossfilter/reductio?