重置或清除立體圖

Question

我正在嘗試重置或清除D3.js立體圖，以便它開始新鮮。下面是代碼：

$(function(){ 

    // create new cubism.js context to render 
    var graphContext = cubism.context() 
     .serverDelay(1000) // allow 1second delay 
     .step(1000) // 1 second steps 
     .size(650); // 50px wide 

    // create a new metric 
    // this allows you to retrieve values from some source 
    // this is data-source agnostic, so this does not matter. 
    var graphMetric = graphContext.metric(function(start, stop, step, callback) { 
     var values = []; 
     start = +start; 
     stop = +stop; 
     while (start < stop) { 
      start += step; 
      values.push(Math.random()); 
     } 
     callback(null, values); 
    }); 


    // here we create a new element and then append it to our 
    // parent container. Then we call d3 to select the newly created 
    // div and then we can create a chart 
    var graphElement = document.createElement("div"); 
    $("#insertElement").append(graphElement);  
    d3.select(graphElement).call(function(div) { 
     div.append("div") 
      .attr("class", "axis top") 
      .call(graphContext.axis().orient("top")); 
     div.append("div") 
      .attr("class", "rule") 
      .call(graphContext.rule()); 
     div.selectAll(".horizon") 
      .data([graphMetric]) 
      .enter().append("div") 
      .attr("class", "horizon") 
      .call(graphContext.horizon() 
        .height(150) 
      );   
    }); 

}); 

這裏是jsfiddle

Answer 1

演示我只能建議自行清除畫布。像這樣

$(graphElement).find('canvas')[0].getContext('2d').clearRect(0, 0, canvasWidth, canvasHeight); 

的完整代碼（jsfiddle）

console.clear(); 

$(function(){ 

    var canvasWidth = 650, canvasHeight = 150; 
    // create new cubism.js context to render 
    var graphContext = cubism.context() 
     .serverDelay(1000) // allow 1second delay 
     .step(1000) // 1 second steps 
     .size(canvasWidth); // 50px wide 

    // create a new metric 
    // this allows you to retrieve values from some source 
    // this is data-source agnostic, so this does not matter. 
    var graphMetric = graphContext.metric(function(start, stop, step, callback) { 
     var values = []; 
     start = +start; 
     stop = +stop; 
     while (start < stop) { 
      start += step; 
      values.push(Math.random()); 
     } 
     callback(null, values); 
    }); 


    // here we create a new element and then append it to our 
    // parent container. Then we call d3 to select the newly created 
    // div and then we can create a chart 
    var graphElement = document.createElement("div"); 
    $("#insertElement").append(graphElement);  
    d3.select(graphElement).call(function(div) { 
     div.append("div") 
      .attr("class", "axis top") 
      .call(graphContext.axis().orient("top")); 
     div.append("div") 
      .attr("class", "rule") 
      .call(graphContext.rule()); 
     div.selectAll(".horizon") 
      .data([graphMetric]) 
      .enter().append("div") 
      .attr("class", "horizon") 
      .call(graphContext.horizon() 
        .height(canvasHeight) 
      );   
    }); 

    $('#reset').on('click', function() { 
    $(graphElement).find('canvas')[0].getContext('2d').clearRect(0, 0, canvasWidth, canvasHeight); 
    }); 
});