Javascript dc.js pieChart在filterAll（）之后未更新
我最近发现使用dc.js的饼图没有正确更新。dimension.filterAll（）工作正常，dc.renderAll（）将刷新页面并重新绘制图表，但图表没有反映正在过滤的数据。 这是代码Javascript dc.js pieChart在filterAll（）之后未更新,javascript,dc.js,Javascript,Dc.js,我最近发现使用dc.js的饼图没有正确更新。dimension.filterAll（）工作正常，dc.renderAll（）将刷新页面并重新绘制图表，但图表没有反映正在过滤的数据。 这是代码 <script> var data = [{date: "2011-11-14T16:17:54Z", quantity: 2, total: 190, tip: 100, type: "tab"}, {date: "2011-11-14T16:20:19Z", quan
<script>
var data = [{date: "2011-11-14T16:17:54Z", quantity: 2, total: 190, tip: 100, type: "tab"},
{date: "2011-11-14T16:20:19Z", quantity: 2, total: 190, tip: 100, type: "tab"},
{date: "2011-11-14T16:28:54Z", quantity: 1, total: 300, tip: 200, type: "visa"},
{date: "2011-11-14T16:30:43Z", quantity: 2, total: 90, tip: 0, type: "tab"},
{date: "2011-11-14T16:48:46Z", quantity: 2, total: 90, tip: 0, type: "tab"},
{date: "2011-11-14T16:53:41Z", quantity: 2, total: 90, tip: 0, type: "tab"},
{date: "2011-11-14T16:54:06Z", quantity: 1, total: 100, tip: 0, type: "cash"},
{date: "2011-11-14T16:58:03Z", quantity: 2, total: 90, tip: 0, type: "tab"},
{date: "2011-11-14T17:07:21Z", quantity: 2, total: 90, tip: 0, type: "tab"},
{date: "2011-11-14T17:22:59Z", quantity: 2, total: 90, tip: 0, type: "tab"},
{date: "2011-11-14T17:25:45Z", quantity: 2, total: 200, tip: 0, type: "cash"},
{date: "2011-11-14T17:29:52Z", quantity: 1, total: 200, tip: 100, type: "visa"}];
var parseDate = d3.time.format("%m/%d/%Y").parse;
data.forEach(function (d) {
d.date = parseDate(d.date);
d.total = d.http_404 + d.http_200 + d.http_302;
d.Year = d.date.getFullYear();
});
var yearDim;
$(document).ready(function () {
var cx = crossfilter(data);
yearDim = cx.dimension(function (d) { return d.Year; });
var yearGroup = yearDim.group().reduce(
function (p, v) {
++p.count;
return p;
},
function (p, v) {
--p.count;
return p;
},
function () {
return {
count: 0
};
}
);
mypie = dc.pieChart('#pie-chart');
mypie
.dimension(yearDim)
.group(yearGroup)
.valueAccessor(function (d) {
return d.value.count;
});
dc.renderAll();
});
function resetYear() {
yearDim.filterAll();
dc.redrawAll();
dc.renderAll();
}
</script>
<body>
<div class="container-fluid">
<div>
<button type="button" onclick="resetYear();">Year</button>
</div>
</div>
</body>
var数据=[{date:“2011-11-14T16:17:54Z”，数量：2，总数：190，提示：100，类型：“tab”}，
{日期：“2011-11-14T16:20:19Z”，数量：2个，总数：190个，提示：100个，键入：“tab”}，
{日期：“2011-11-14T16:28:54Z”，数量：1，总数：300，小费：200，类型：“visa”}，
{日期：“2011-11-14T16:30:43Z”，数量：2，总数：90，提示：0，键入：“tab”}，
{日期：“2011-11-14T16:48:46Z”，数量：2，总数：90，提示：0，键入：“tab”}，
{日期：“2011-11-14T16:53:41Z”，数量：2，总数：90，提示：0，键入：“tab”}，
{日期：“2011-11-14T16:54:06Z”，数量：1，总数：100，小费：0，键入：“现金”}，
{日期：“2011-11-14T16:58:03Z”，数量：2，总数：90，提示：0，键入：“tab”}，
{日期：“2011-11-14T17:07:21Z”，数量：2，总数：90，提示：0，键入：“tab”}，
{日期：“2011-11-14T17:22:59Z”，数量：2，总数：90，提示：0，键入：“tab”}，
{日期：“2011-11-14T17:25:45Z”，数量：2，总数：200，小费：0，类型：“现金”}，
{日期：“2011-11-14T17:29:52Z”，数量：1，总数：200，小费：100，类型：“visa”}；
var parseDate=d3.time.format（“%m/%d/%Y”）.parse；
data.forEach（函数（d）{
d、 日期=解析日期（d.date）；
d、 总计=d.http_404+d.http_200+d.http_302；
d、 Year=d.date.getFullYear（）；
});
var-yearDim；
$（文档）.ready（函数（）{
var cx=交叉过滤器（数据）；
yearDim=cx.dimension（函数（d）{返回d.Year；}）；
var yearGroup=yearDim.group（）.reduce(
功能（p，v）{
++p、 计数；
返回p；
},
功能（p，v）{
--p、 计数；
返回p；
},
函数（）{
返回{
计数：0
};
}
);
mypie=dc.pieChart（“#饼图”）；
我的
.尺寸（年尺寸）
.小组（年度小组）
.valueAccessor（函数（d）{
返回d.value.count；
});
dc.renderAll（）；
});
函数重置年份（）{
yearDim.filteral（）；
dc.redrawAll（）；
dc.renderAll（）；
}
年
mypie.filter（null）yearDim.filterAll（）（此外，在更改过滤器时不需要
dc.renderAll（）dc.redrawAll（）mypie.redrawGroup（）更具体。）当筛选器发生更改时，您需要告诉图表-这就是为什么最好始终通过图表操纵维度（使用mypie.filter（null）
而不是yearDim.filterAll（）
）
原因：目前crossfilter中没有getter，因此dc.js需要维护当前筛选器状态的镜像
（此外，在更改过滤器时不需要dc.renderAll（）
，这将导致额外的移动。dc.redrawAll（）
应该足够了，而mypie.redrawGroup（）更具体。）