我有一个时间序列，其中包含日期，金额和计数列 . 我只是想按月绘制金额的总和，并通过单击栏选择一个月，而不是使用画笔 . 我认为我的目标非常简单，但我已经翻了几天没有成功 . 主要问题是我在图表上应用了一个过滤器，但重绘图表时不考虑过滤器 . 谢谢你的帮助 .
我正在使用 ：
-
dc.js 2.0.2
-
d3.js 3.5.17
-
crossfilter 1.4
这是我的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Just selecting a month </title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="../static/lib/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="../static/lib/css/dc.css"/>
</head>
<body>
<div>
Month selector
<a class="reset" href='javascript:chart.filterAll();dc.redrawAll();'> Reset</a>
<div id="time-chart"></div>
</div>
<script type="text/javascript" src="../static/lib/js/d3.js"></script>
<script type="text/javascript" src="../static/lib/js/crossfilter.js"></script>
<script type="text/javascript" src="../static/lib/js/dc.js"></script>
<script type="text/javascript">
var dateFormat_in = d3.time.format.utc("%Y-%m-%d");
var chart = dc.barChart("#time-chart");
d3.csv('setdates.csv', function(error, dataset) {
if(error)
throw new Error(error);
dataset.forEach(function(d) {
d["date"] = dateFormat_in.parse(d["date"]);
d["amount"] = +d["amount"];
});
var ndx = crossfilter(dataset);
var monthDim = ndx.dimension(d => d3.time.month(d["date"]));
var monthGroup = monthDim.group().reduceSum(d => d["amount"]);
var minDate = monthDim.bottom(1)[0]["date"];
var maxDate = monthDim.top(1)[0]["date"];
minDate=d3.time.day.offset(minDate, -40);
//console.log([minDate,maxDate]);
chart
.width(400)
.height(260)
.x(d3.time.scale().domain([minDate, maxDate]))
.xUnits(d3.time.months)
.dimension(monthDim)
.group(monthGroup)
.margins({left: 50, top: 20, right: 0, bottom: 20})
.elasticY(true)
.gap(60)
.centerBar(true).xAxisPadding(15).xAxisPaddingUnit('month')
.on('pretransition', function(ichart) {
ichart.selectAll("rect.bar").on("click", function (d) {
console.log([d.data.key,new Date(2016,d.data.key.getMonth()+1,1)]);
chart.filter([d.data.key,new Date(2016,5,1)]).redraw();
console.log(chart.filters())
//dc.renderAll();
});
})
.brushOn(false)
.clipPadding(20);
chart.centerBar(true).xAxisPadding(15).xAxisPaddingUnit('month')
dc.renderAll();
});
</script>
这些是我的数据：
date,amount,count
2016-04-28,93.54,3.89
2016-04-29,94.42,3.94
2016-04-30,95.30,3.99
2016-05-02,97.06,4.08
2016-05-03,98.50,4.11
2016-05-04,99.94,4.13
2016-05-06,102.82,4.18
2016-05-07,104.26,4.20
2016-05-09,107.14,4.25
2016-05-10,109.27,4.26
2016-05-11,111.40,4.26
2016-05-12,113.53,4.27
2016-05-13,115.66,4.27
2016-05-14,117.78,4.28
2016-05-17,124.17,4.30
2016-05-18,126.30,4.30
2016-05-19,128.43,4.31
2016-05-20,130.56,4.32
2016-05-21,132.68,4.32
2016-05-23,136.94,4.33
2016-05-24,139.14,4.40
2016-05-25,141.35,4.48
2016-05-26,143.55,4.55
2016-05-27,145.75,4.62
2016-05-28,147.96,4.69
2016-05-30,152.36,4.83
2016-05-31,153.70,4.88
2016-06-01,155.04,4.93
2016-06-02,156.38,4.98
2016-06-03,157.73,5.02
2016-06-04,159.07,5.07
2016-06-06,161.75,5.17
2016-06-07,161.22,5.15
2016-06-08,160.70,5.14
2016-06-09,160.17,5.13
2016-06-10,159.64,5.12
2016-06-11,159.11,5.11
2016-06-13,158.06,5.08
2016-06-14,156.32,5.06
2016-06-15,154.59,5.04
2016-06-16,152.85,5.01
2016-06-17,151.12,4.99
2016-06-18,149.38,4.96
1 回答
有趣的解决方案this problem .
您可能希望在该处理程序中使用
.redrawGroup()而不是.redraw()，并且您还需要将您的范围包装在dc.js过滤器对象中，特别是RangedFilter：与crossfilter的dimension.filter()dc.js不同chart.filter()将对象而不是数组 .Initial Range selection in DC.js chart