D3.js刷牙後重繪圖表

Question

我正在研究D3.js圖表​​，我想在時間軸上進行刷新。當我想用新數據重新繪製圖表時，我感到困惑。

´function brushed() { 

    var startDate=new Date(brush.extent()[0]); 
    var endDate=new Date(brush.extent()[1]); 

    var newDates=[]; 

    var i=0; 

while(JSONdata.measurementPoints[i].measurementDateTime<=endDate){ 
    if(JSONdata.measurementPoints[i].measurementDateTime>=startDate){ 
    newDates.push(JSONdata.measurementPoints[i].measurementDateTime); 
    } 
    i++; 
} 
if(newDates.length>0){ 
    chart.select('path').attr('d',pathGenerator(newDates)); 
    chart.select(".x.axis").call(xAxis); 
} 
}´ 

我的問題是，我改變了元素上的數據後，整個圖消失了。我是D3.js中的新秀，並且不知道這是否是實現此功能的最佳方式。

我欣賞任何建議。

代碼：http://codepen.io/laczko090/pen/ozJANP?editors=1010

提前感謝！

Answer 1

您需要在brushed中重繪主圖線和座標軸。

Modified CodePen

保存到圖線的路徑參考：

var path = series.append('path') 
    .attr('vector-effect', 'non-scaling-stroke') 

[...]

在brushed，重繪：

path.attr('d', pathGenerator(dates)); 

xAxis.scale(xScale); 
xAxisEl.call(xAxis);