Question

我最近发现使用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", 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>

Answer 1

您需要在过滤器更改时告诉图表 - 这就是为什么最好总是通过图表操纵维度（使用mypie.filter(null)而不是yearDim.filterAll()）。

原因：目前crossfilter中没有getter，因此dc.js需要保持当前过滤器状态的镜像。

（此外，更改过滤器时您不需要dc.renderAll() - 这将导致额外的移动。dc.redrawAll()应该足够了，mypie.redrawGroup()更具体。）

在filterAll（）之后dc.js pieChart没有更新

1 个答案: