Crossfilter 条形图不呈现

Question

我是 Crossfilter 和 JS 的新手。我不明白为什么这个条形图不会呈现。我尝试了几种日期格式。 Link 下面是我的 jsfiddle。有什么帮助吗？

它基本上是读取 JSON 格式的贷款数据集，并尝试按时间绘制按天计数的条形图。

<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/

Crossfilter 条形图不呈现

Crossfilter barchart does not render

crossfilter

dc.js