javascript - 更新/重绘折线图时 dc.js 出现问题

Question

我对 javascript 和 dc.js 非常陌生。单击按钮后，我尝试删除并更新折线图中的新数据。但是，当重新绘制折线图时，我遇到了一些问题。一些区域出现并与图表区域重叠。这是重新绘制之前和之后的折线图的图片 有人可以帮我解决这个问题吗？我真的很感激每一个答案。

谢谢!

这是我的代码

   **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);

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

Answer 1

您必须按日期对数据进行排序。 AMCharts 也有同样的毛病。