使x轴在交叉滤波器动态

Making X-axis in cross filter dynamic

本文关键字：滤波器 动态      更新时间：2023-09-26

我正在学习d3和交叉过滤器。我通过从json文件读取数据绘制了使用交叉过滤器和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();
 }

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

相信1.6版本比2.0版本更好。

相关文章：