空のデータセットを使用してd3ラインを更新

Question

私はd3ラインジェネレータでラインを作成し、それにデータセットを供給します。このデータセットは1時間ごとに更新されます。

var myline = d3.svg.line()  
    .x(function(d) { return x(d.date); }) 
    .y(function(d) { return y(d.y); }); 

svg.append("path") 
    .data(dataset) 
    .attr("class", "line") 
    .attr("d", myline(dataset)); 

ただし、1時間ごとにデータセットはリセットされ、空です。ただし空のデータセットで行を供給するとデータは変更されませんが、データがないため削除されると思います。

空のデータセットが入力されたときに行を削除する方法はありますか？

Answer 1

データを表示せずにグラフを更新する方法はありませんが、ここで問題となるのは、データ配列に基づいてパス要素を繰り返し追加することですグラフを更新するたびにデータ関数とバインドする必要があります）。

代わりに、パスを1回だけ追加し、グラフを更新するたびにd属性を変更することもできます。そうすれば、データが空の場合、パスは表示されません。ここで

はデモで、5秒ごとにデータ配列が空である：

var data = []; 
 

 
for(var i = 0; i < 100; i++){ 
 
    data.push({x: i*3, y:Math.random()*150}); 
 
} 
 

 
var svg = d3.select("svg"); 
 

 
var lineGen = d3.svg.line() 
 
    .x(d=>d.x) 
 
    .y(d=>d.y); 
 

 
var line = svg.append("path") 
 
    .attr("fill","none") 
 
    .attr("stroke","black"); 
 

 
var t = 0; 
 
setInterval(function(){ 
 
    var newData = data.slice(0,(t%100)+1); 
 
    line.attr("d", lineGen(newData)); 
 
    t++; 
 
}, 50); 
 

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<svg></svg>