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

刷完后D3.js重绘图表

1 个答案: