Javascript 交叉滤波器中X轴的动态生成
我正在学习d3和交叉滤波器。我通过读取json文件中的数据,使用crossfilter和dc绘制了一个图表。然而,我的json文件是动态的。它不断更新。我遵循了()上的示例,其中X轴通过使用Javascript 交叉滤波器中X轴的动态生成,javascript,d3.js,dc.js,crossfilter,Javascript,D3.js,Dc.js,Crossfilter,我正在学习d3和交叉滤波器。我通过读取json文件中的数据,使用crossfilter和dc绘制了一个图表。然而,我的json文件是动态的。它不断更新。我遵循了()上的示例,其中X轴通过使用 .x(d3.time.scale().domain([new Date(1985, 0, 1), new Date(2012, 11, 31)])) 但是,在我的例子中,json文件每次都会更新,这是一个问题。有解决方法吗?X轴和Y轴都有弹性吗?如果有,怎么做? 我的代码如下所示: var facts
.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版中工作得更好
如果它不起作用,请检查。ElasticX不起作用。!!。上述解决方案有效。!!谢谢:)