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。

使X轴在交叉滤波器中动态化

1 个答案: