Обновление строки d3 с пустым набором данных

Question

Я создаю линию с генератором линии d3 и подаю ее с помощью набора данных; этот набор данных обновляется каждый час.

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

Однако каждый полный час набор данных сбрасывается и пуст. Однако подача строки с пустым набором данных оставляет ее неизменной, в то время как я ожидаю, что она будет удалена, так как у нее нет данных.

Есть ли способ удалить строку, когда она подается с пустым набором данных?

Answer 1

Трудно вам помочь, не видя ваши данные и то, как вы обновляете диаграмму, но мне кажется, что проблема заключается в том, что вы повторно добавляете элемент пути на основе массива данных (который вы даже не необходимо связать с функцией данных) каждый раз, когда вы обновляете диаграмму.

Альтернатива добавляет путь только один раз и изменяет свой атрибут d каждый раз, когда вы обновляете диаграмму. Таким образом, если данные пустые, путь не будет отображаться.

Вот демо, каждые пять секунд массив данных пуст:

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>