x轴未更新dc.js过滤器

时间:2013-11-27 21:38:46

标签: d3.js crossfilter dc.js

小提琴:http://jsfiddle.net/tvinci/J9ghN/

我创建了按年分解的饼图,并根据维度设置了折线图的最小和最大范围。但是,当我选择一年时,范围不会更新。我做错了吗?

var yearRingChart = dc.pieChart("#chart-ring-year");
var tpslineChart = dc.lineChart("#chart-tps");

var data2 = [
{date: "10/01/2012", hits: 1, tps: 100, http_status:200},
{date: "10/01/2012", hits: 1, tps: 90, http_status:302},
{date: "01/02/2013", hits: 1, tps: 100, http_status:200},
{date: "01/02/2013", hits: 1, tps: 10, http_status:302},
{date: "01/03/2013", hits: 0, tps: 300, http_status:200},
{date: "01/03/2013", hits: 1, tps: 10, http_status:302},
{date: "01/04/2013", hits: 1, tps: 90, http_status:200},
{date: "01/04/2013", hits: 1, tps: 0, http_status:302},
];

var ndx2 = crossfilter(data2);
// normalize/parse data
var parseDate = d3.time.format("%m/%d/%Y").parse;

data2.forEach(function(d) {
d.date = parseDate(d.date);
d.Year=d.date.getFullYear();
});

var yearDim = ndx2.dimension(function(d) {return +d.Year;});
var tpsDim = ndx2.dimension(function(d) {return d.date;});

var tps_total = yearDim.group().reduceSum(function(d) {return d.tps;});
var tps_graph = tpsDim.group().reduceSum(function(d) {return d.tps;});

var minDate = tpsDim.bottom(1)[0].date;
var maxDate = tpsDim.top(1)[0].date;

yearRingChart
.width(200).height(200)
.dimension(yearDim)
.group(tps_total)
.innerRadius(50);

tpslineChart
.width(500).height(200)
.dimension(tpsDim)
.group(tps_graph)
.brushOn(false)
.x(d3.time.scale().domain([minDate,maxDate]))
.xUnits(d3.time.day)
.yAxisLabel("TPS")
.elasticY(true)
.margins({ top: 10, left: 50, right: 10, bottom: 50 })
//.renderlet(function (chart) {chart.selectAll("g.x text").attr('dx', '-30').attr('transform',     "rotate(-90)");})
;

dc.renderAll();

0 个答案:

没有答案