链式转换数据问题

Question

我一直在使用更新且不断发展的Bostock's chained transitions版本。

最近我不得不迁移到一个稍微复杂的数据对象模型，并决定切换到json数据是个好时机。

我还必须将“当年”调整为包括12个月（因此也包括去年的一部分）。 IE浏览器。对于缩放模型而言，数据中的下降到零是不可接受的。

现在，由于某些原因，我无法在区域和valueLine转换中正确更新数据。

所有轴和标签都正确更新。但是，不是呈现新的数据选择然后转换它，而是当前的数据滑落。

我相信这是在我的代码这部分的错误，但我不能追查：

此外，完整的代码在上Plunker HERE。

function change() { 
    //clearTimeout(timeout); 

    current_year = d3.select(this).text(); 

    // First transition the line & label to the new current_year. 
    var t0 = svg.transition().duration(750); 
    t0.selectAll(".label").attr("transform", transform).text(current_year); 


    //then transition the y-axis. 
    yScale.domain([(d3.min(data[current_year], function(d) { return d.close; })*.98), d3.max(data[current_year], function(d) { return d.close; })]); 

    area.y0(yScale(yScale.domain()[0]));  
    t0.selectAll(".area").attr("d", area).attr('fill', colors[current_year]); 
    t0.selectAll(".line").attr("d", valueLine).attr('stroke', colors[current_year]); 
    var t1 = t0.transition(); 
    t1.selectAll(".label").attr("transform", transform); 
    t1.selectAll(".y.axis").call(yAxis); 

    //then update the xAxis 
    xScale.domain([d3.min(data[current_year], function(d) { return d.date; }), d3.max(data[current_year], function(d) { return d.date;})]); 
    svg.selectAll(".x.axis").call(xAxis); 


    } 

    function transform(d) { 
    return "translate(" + xScale(d.date) + "," + yScale(d.close) + ")"; 
    } 

而且JSON数据格式如下：

{ 
    "2017": [ 
     { 
     "date": "2016/11/01", 
     "close": 778 
     }, 
     { 
     "date": "2016/12/01", 
     "close": 769 
     }, 
     { 
     "date": "2017/01/01", 
     "close": 837 
     }, 
     { 
     "date": "2017/02/01", 
     "close": 829 
     }, 
     { 
     "date": "2017/03/01", 
     "close": 828 
     }, 
     { 
     "date": "2017/04/01", 
     "close": 816 
     }, 
     { 
     "date": "2017/05/01", 
     "close": 799 
     }, 
     { 
     "date": "2017/06/01", 
     "close": 805 
     }, 
     { 
     "date": "2017/07/01", 
     "close": 804 
     }, 
     { 
     "date": "2017/08/01", 
     "close": 789 
     }, 
     { 
     "date": "2017/09/01", 
     "close": 780 
     }, 
     { 
     "date": "2017/10/01", 
     "close": 775 
     } 
    ], 
"2016": [ 
      { 
     "date": "2016/01/01", 
     "close": 837 
     }, 
     { 
     "date": "2016/02/01", 
     "close": 829 
     }, 
     { 
     "date": "2016/03/01", 
     "close": 828 
     }, 
     { 
     "date": "2016/04/01", 
     "close": 716 
     }, 
     { 
     "date": "2016/05/01", 
     "close": 759 
     }, 
     { 
     "date": "2016/06/01", 
     "close": 705 
     }, 
     { 
     "date": "2016/07/01", 
     "close": 704 
     }, 
     { 
     "date": "2016/08/01", 
     "close": 789 
     }, 
     { 
     "date": "2016/09/01", 
     "close": 780 
     }, 
     { 
     "date": "2016/10/01", 
     "close": 775 
     }, 
     { 
     "date": "2016/11/01", 
     "close": 778 
     }, 
     { 
     "date": "2016/12/01", 
     "close": 769 
     } 
    ], 
    "2015": [ 
      { 
     "date": "2015/01/01", 
     "close": 637 
     }, 
     { 
     "date": "2015/02/01", 
     "close": 629 
     }, 
     { 
     "date": "2015/03/01", 
     "close": 668 
     }, 
     { 
     "date": "2015/04/01", 
     "close": 616 
     }, 
     { 
     "date": "2015/05/01", 
     "close": 669 
     }, 
     { 
     "date": "2015/06/01", 
     "close": 605 
     }, 
     { 
     "date": "2015/07/01", 
     "close": 624 
     }, 
     { 
     "date": "2015/08/01", 
     "close": 689 
     }, 
     { 
     "date": "2015/09/01", 
     "close": 680 
     }, 
     { 
     "date": "2015/10/01", 
     "close": 675 
     }, 
     { 
     "date": "2015/11/01", 
     "close": 668 
     }, 
     { 
     "date": "2015/12/01", 
     "close": 669 
     } 
    ], 
"2014": [ 
      { 
     "date": "2014/01/01", 
     "close": 537 
     }, 
     { 
     "date": "2014/02/01", 
     "close": 529 
     }, 
     { 
     "date": "2014/03/01", 
     "close": 528 
     }, 
     { 
     "date": "2014/04/01", 
     "close": 516 
     }, 
     { 
     "date": "2014/05/01", 
     "close": 549 
     }, 
     { 
     "date": "2014/06/01", 
     "close": 575 
     }, 
     { 
     "date": "2014/07/01", 
     "close": 594 
     }, 
     { 
     "date": "2014/08/01", 
     "close": 589 
     }, 
     { 
     "date": "2014/09/01", 
     "close": 570 
     }, 
     { 
     "date": "2014/10/01", 
     "close": 555 
     }, 
     { 
     "date": "2014/11/01", 
     "close": 578 
     }, 
     { 
     "date": "2014/12/01", 
     "close": 569 
     } 
    ] 
} 

Answer 1

的数据重新绑定到路径...

svg.select(".area").datum(data[current_year]); 
svg.select(".line").datum(data[current_year]); 

...和之前计算xScale域转换：

xScale.domain([d3.min(data[current_year], function(d) { 
    return d.date; 
}), d3.max(data[current_year], function(d) { 
    return d.date; 
})]); 

以下是更新的重要程序：https://plnkr.co/edit/xBAR5LaDL8iifjlPdgeF?p=preview