javascript - データがないときにSVGパスにギャップがある

Question

D3でリアルタイムの線グラフを作成しようとしています。私のデータは[[日付、値]、[日付、値]の形式です。データを受け取らない場合、値は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

これは、単一の軸セットに複数のプロットを作成することで簡単に実行できます。データの各連続セットは、個別のプロットになります。次に、それらをすべて同じ色などに割り当てるようにしてください。