鏈式轉換數據問題

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