如何在使用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 + ")");