使交叉滤波器中的 X 轴动态化答案

【问题标题】：Making X-axis in cross filter dynamic使交叉滤波器中的 X 轴动态化
【发布时间】：2014-07-17 10:21:55
【问题描述】：

我正在学习 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();

}

问题解决了。！！试试这个sn-p：

 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();

 }

【问题讨论】：

标签： javascript d3.js dc.js crossfilter

【解决方案1】：

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

相信它在 1.6 版中比在 2.0 版中效果更好。

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

【讨论】：

ElasticX 没用。！！上述解决方案有效。！！谢谢 :)