更新/重绘线图时在dc.js上出现问题

时间:2015-02-26 00:27:36

标签: javascript d3.js linechart dc.js crossfilter

我对javascript和dc.js非常新。单击按钮后,我尝试在线图中删除并更新新数据。但是,重新绘制折线图时遇到了一些问题。某些区域出现并覆盖了图形区域。这是重绘之前和之后折线图的图片 Original version After updated the new data After switched the data back to the previous data 任何人都可以帮我解决这个问题吗?我真的很感激每一个答案。

谢谢!

这是我的代码

   **Just sample code, I have 5000 objects in my array**
    var data2 = [{"year": 2010,"total": 1}, 
                {"year": 2010,"total": 1},
                {"year": 2000, "total":1},
                {"year": 2000, "total":1},
                {"year": 1950, "total":1},                    
                {"year": 1950, "total":1},
                {"year": 1987, "total":1},
                {"year": 1987, "total":1},                    
                {"year": 2000, "total": 1}];
     var dataCrossfilter = crossfilter(data2);
       var yearDimension = dataCrossfilter.dimension(function (d) {
           return d.year;
           });
       var yearGroup = yearDimension.group().reduceSum(function (d) {
           return d.total;
           });     

       var yChart = dc.lineChart("#yChart");

        yChart.width(960)
        .height(300)
        .margins({top: 10, right: 10, bottom: 20, left: 40})
        .x(d3.scale.linear().domain([1800,2020]))
        .dimension(yearDimension)
        .group(yearGroup)
        .renderArea(true)           
        .brushOn(true)
        .transitionDuration(1500)
        .elasticY(true)
        .elasticX(true)
        .xAxis();

    dc.renderAll();

////用于加载按钮

var load_button = function(data) {
            return function load_it() {
                    dataCrossfilter.remove();
                    dataCrossfilter.add(data);
                    dc.redrawAll();
            }
        }

    button1 = load_button(data1);
    button2 = load_button(data2);

非常感谢你!我真的很感激每一个答案。

1 个答案:

答案 0 :(得分:0)

您必须按日期对数据进行排序。 AMCharts遭受同样的弊病。