如何在使用D3.js绘制心电图波形图时转换时删除先前的路径数据？

Question

其目的是绘制一个指示当前网络泛洪的ECG波形图，并且图表不断向左移动并重新绘制ajax在视口中获取的新数据。

但我不知道如何删除以前的路径节点，当这些节点转出视口。

var wrapperWidth = 800; 
var wrapperHeight = 400; 

var margin = { top: 20, right: 0, bottom: 30, left: 0 }, 
    width = wrapperWidth - margin.left - margin.right, 
    height = wrapperHeight - margin.top - margin.bottom; 
var xAxisScale = 15; 
var svg; 

var ECG = { 
    begin: function() { 
     var list = [1,2,3,4,5,1,2,3,4,5,1,2,3,4,5,1,2,3,4,5,1,2,3,4,5,1,2,3,4,5,1,2,3,4,5,1,2,3,4,5,1,2,3,4,5,1,2,3,4,5,1,2,3,4,5,1,2,3,4,5]; 
     svg = d3.select(".jke-ecgChart").append("svg") 
      .attr("width", wrapperWidth) 
      .attr("height", wrapperHeight); 
     this.sliceData(list); 
    }, 
    sliceData: function (list) { 
     var index = 0; 

    // draw the path that in current viewport 
    this.drawECG(list.slice(index, 10).map(function(item, index) { 
     return { 
      value: item.lTagIndex || 0, 
      title: item.sTagName || '' 
     } 
    })); 

    // // draw the right part path that will tansition to viewport 
    // 
    // index+=10; 
    // this.drawECG(list.slice(index, index+10).map(function(item, index) { 
    //  return { 
    //   value: item.lTagIndex || 0, 
    //   title: item.sTagName || '' 
    //  } 
    // })); 
    }, 
    drawECG: function(data) { 
    // d3.shuffle(data); 

    var valueData = []; 
    // format the data 
    data.forEach(function(d, index) { 
     d.index = index; 
     valueData.push(d.value); 
    }); 

    var mean = d3.mean(valueData); 
    var minMax = d3.extent(valueData); 

    var y = d3.scaleLinear().range([height, 0]); 

    // define the line 
    var valueline = d3.line() 
     .x(function(d) { 
      return d.index * xAxisScale; 
     }) 
     .y(function(d) { 
      return y(d.value - mean); 
     }); 

    // append the svg obgect to the body of the page 
    // appends a 'group' element to 'svg' 
    // moves the 'group' element to the top left margin 
    var group = svg 
     .attr("width", wrapperWidth) 
     .attr("height", wrapperHeight) 
     .append("g") 
     .attr("transform", 
      "translate(" + margin.left + "," + margin.top + ")"); 

    y.domain([(minMax[0] - mean), (minMax[1] - mean)]); 

    // Add the valueline path. 
    group.append("path") 
     .data([data]) 
     .attr("class", "line") 
     .attr("d", valueline); 

    var showTextData = data.filter(function (textData, index) { 
     if (data[index-1] && data[index+1]) { 

      if(data[index-1].value < textData.value && data[index+1].value < textData.value) { 
       return true; 
      } 
      if(data[index-1].value > textData.value && data[index+1].value > textData.value) { 
       return true; 
      } 
      return false; 
     } 
    }); 

    group.transition() 
     .duration(13000) 
     .attr("transform", "translate(" + -wrapperWidth + ", 0)") 
     .style("fill", "red") 
     .remove(); 

    group.append("g") 
     .attr("class", "states-names") 
     .selectAll("text") 
     .data(showTextData) 
     .enter() 
     .append("svg:text") 
     .text(function(d) { 
      return d.title; 
     }) 
     .attr("x", function(d) { 
      return d.index * xAxisScale; 
     }) 
     .attr("y", function(d) { 
      return y(d.value - mean); 
     }) 
     .attr("text-anchor", "middle") 
     .attr('fill', 'white'); 
} 

}

Answer 1

您将需要追加到它的路径和其他相关的DOM之前删除最后创建的组。

//remove the group 
svg.select("g").remove();//ADD THIS LINE 

//create a group and add line and other dom to it. 
var group = svg 
    .attr("width", wrapperWidth) 
    .attr("height", wrapperHeight) 
    .append("g") 
    .attr("transform", 
     "translate(" + margin.left + "," + margin.top + ")");