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