javascript - 使交叉过滤器中的 X 轴动态化

Question

我正在学习 d3 和 crossfilter。我通过从 json 文件中读取数据使用 crossfilter 和 dc 绘制了一个图表。但是，我的 json 文件是一个动态文件。它不断更新。我正在关注 ( http://dc-js.github.io/dc.js/) 上的示例，其中 X 轴被预定义并通过使用限制在一个范围内

.x(d3.time.scale().domain([new Date(1985, 0, 1), new Date(2012, 11, 31)]))

但是，对于我的情况而言，这是一个问题，因为每次都会更新 json 文件。是否有解决此问题的方法？ X轴和Y轴都可以做成弹性的吗？如果可以，那怎么做？我的代码如下所示:

  var facts = crossfilter(result);
  var barChart1 = dc.barChart("#dc-marketing-chart");
  var devValue = facts.dimension(function (d) {return d.date_hour;});
  var devValueGroupSum = devValue.group().reduceSum(function(d) { return d.metric;})
  barChart1.width(960)
    .height(150)
    .margins({top: 10, right: 10, bottom: 20, left: 40})
    .dimension(devValue)
    .group(devValueGroupSum)
    .transitionDuration(500)
    .elasticY(true)
    .x(d3.time.scale().domain([new Date(2014, 4, 1), new Date(2014, 4, 14)]))
    .xAxis();
    dc.renderAll();

}

问题已解决。!!试试这个片段:

 var facts = crossfilter(result);
 var barChart1 = dc.barChart("#dc-marketing-chart");
 var devValue = facts.dimension(function (d) {return d.date_hour;});
 var devValueGroupSum = devValue.group().reduceSum(function(d) { return d.metric;});
 var minDate = devValue.bottom(1)[0].date_hour;
 var maxDate = devValue.top(1)[0].date_hour;
 barChart1.width(960)
 .height(150)
 .margins({top: 10, right: 10, bottom: 20, left: 40})
 .dimension(devValue)
 .group(devValueGroupSum)
 .transitionDuration(500)
 .elasticY(true)
 .x(d3.time.scale().domain([minDate,maxDate]))
 .xAxis();
 dc.renderAll();

 }

Answer 1

您可以尝试 .elasticX(true) 但我认为那里可能潜伏着一些错误。

相信它在 1.6 版中比在 2.0 版中工作得更好。

请file a bug on dc.js如果它不起作用。