javascript - 没有数据时，SVG 路径中有间隙

Question

我正在尝试在 D3 中创建实时折线图。我的数据格式为 [[Date, value], [Date, value]。当我没有收到任何数据时，该值将为 0。我希望这些值的线中断，因此它们不会被绘制。然后，我会在我的图表中出现缺失数据的空白。

任何人有任何想法我会如何做到这一点？

Answer 1

尝试这个。变量 my_dataset 是具有属性 {x,y} 的对象数组。“NaN：在可视化中跳过 y 值。

var line = d3.svg.line()
  .x( function( d, i) { return x( d.x); })
  .y( function( d) { return y( d.y); })
  .defined( function( d) { return !isNaN( d.y); })
  ;

my_visualization.append( "svg:path")
    .data( [ my_dataset])
    .attr( "d", line)

Answer 2

您可以通过在一组轴上创建多个图来轻松做到这一点。每个连续的数据集将是一个单独的图。然后只需确保为它们分配所有相同的颜色等。