D3.js可視化滯後

Question

以下d3.js可視化在瀏覽器中打開時滯後。起初它運行平穩但後來的可視化變得滯後。看起來它消耗了大量的內存。另外，當我試圖減少CSV文件中的記錄數量時，它會運行一點平滑。

d3.csv("csv/EditedCSVFile.csv",function(capitalsArray){ 
     var noOfTweets = capitalsArray.length; 
      var i = 0; 
      var intervalId = setInterval(
       function() { 
       if (i == capitalsArray.length) { 
        clearInterval(intervalId); // stops executing once we've browsed through the array 
        alert("Simulation Completed..."); 
       } else { 

        var score = capitalsArray[i].score; 

        if(score =="1"){ 
         var colCode = "#ff0000"; 
        } 
        if(score =="2"){ 
         var colCode = "#00ff00"; 
        } 
        if(score =="3"){ 
         var colCode = "#0000ff"; 
        } 
        if(score =="4"){ 
         var colCode = "#ff00ff"; 
        } 
        if(score =="5"){ 
         var colCode = "#00ffff"; 
        } 
        //console.log(colCode); 
        // Plotting starts here 
        canvas.selectAll(".city-marker") 
        .data(capitalsArray) 
        .enter().append("circle") 
        .attr("r",20) 
        .attr("fill", colCode) 
        .attr("opacity", 0) 
        //.attr("stroke-width","1") 
        .attr("cx",function(d){ 
         var coords = projection([capitalsArray[i].Lat, capitalsArray[i].Long]); 
         //console.log(coords[0]+", "+coords[1]); 
         return coords[0]; 
        }) 
        .attr("cy",function(d){ 
         var coords = projection([capitalsArray[i].Lat, capitalsArray[i].Long]); 
         //console.log(coords[0]); 
         return coords[1]; 
        }) 
        .transition() 
        .attr("r",4) 
        .attr("opacity", 1.0) 
        .duration(1000); 
        //Plotting ends here 
        //console.log("Cordinates: "+capitalsArray[i].Lat+" "+capitalsArray[i].Long); 
        i++; 
       } 
      }, 
      10 
     ); 

    }); 

Answer 1

從我所看到的情況來看，您的代碼很慢並且掛起，因爲它會反覆創建城市標記畫布元素。

好了，所以這是未經測試，因爲我沒有數據，但問題是，你需要用數據一次，然後循環初始化圖表/元素，使過渡，只要你想。

我也製作了一個jsfiddle以下面的代碼和一些示例數據爲例。 發現這個：https://bl.ocks.org/mbostock/1125997這可能部分是你想要的過渡。 （我相信帶有轉換的循環並不是最有效的方法，並且必須有另一種更簡單的方法來實現你想要的，但由於我並不真正知道你想要什麼樣的最終結果，讓我們堅持:) :)

d3.csv("csv/EditedCSVFile.csv", function(capitalsArray) { 

    var scoreToColor = { 
    "1": "#ff0000", 
    "2": "#00ff00", 
    "3": "#0000ff", 
    "4": "#ff00ff", 
    "5": "#00ffff", 
    } 
    // set up your element with the data and save it for further use 
    var cityMarkerCanvas = canvas.selectAll(".city-marker") 
    .data(capitalsArray) 
    .enter() 
    .append("circle") 
    .attr("r", 20) 
    .attr("fill", function(d) { 
     return scoreToColor[d.score]; 
    }); 

    // iterate through the element's data and set the cx, cy and 
    // well, control the transition as you wish 
    cityMarkerCanvas.each(function(d) { 
    // calculate the coords once 
    var coords = projection([d.Lat, d.Long]); 

    d3.select(this) 
    .transition() // move the transition here maybe for a better effect? 
    .attr("cx", function(d) { 
     return coords[0]; 
     }) 
     .attr("cy", function(d) { 
     return coords[1]; 
     }) 
     .attr("r", 4) 
     .attr("opacity", 1.0) 
     .duration(1000); 
    }) 
}); 

或者，沿着這些線。

希望這會有所幫助！祝你好運！

編輯：處理轉換的時序道：https://jsfiddle.net/mkaran/9g3j39mt/配合使用d3.timeout