Javascript D3.js可视化滞后

在浏览器中打开时，以下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
       );

  });

---

从我所看到的，您的代码很慢并且挂起，因为它在城市标记画布元素上创建了一个又一个标记

好的，这是未经测试的，因为我没有数据，但关键是，您需要使用数据初始化图表/元素一次，然后循环进行转换

我还用下面的代码示例和一些示例数据做了一个示例。 并发现：这可能部分是你想要的过渡

（我认为过渡的循环不是最有效的方法，必须有另一种更简单的方法来实现你想要的，但因为我真的不知道你想要的最终结果是什么，让我们坚持下去：））

或者，沿着这些路线

希望这有帮助！祝你好运

---

edit：处理转换时间的一种方法：使用

d3.timeout

我无法测试您的代码（没有数据），但我看到的第一件（次要）事情是用字典替换

if（score…

）。此外，您似乎一遍又一遍地做同样的事情：使用数据初始化

canvas

，其中

x

是数据的长度。你能解释一下原因吗？这真的是你想要的结果吗？最后，我发现转换往往会减慢可视化的速度。我的意思是，在我看来，您似乎在尝试执行可视化/转换，但每次

canvas.selectAll（.city marker”）.data（capitalsArray.enter（）.append（“circle”）时都会不断初始化数据.attr（“r”，20）.attr（“fill”，colCode）.attr（“opacity”，0）

。您可以使用数据初始化画布一次，然后循环

x次

数据，并相应地更改cx/cy以提供视觉效果。（如果我不明白你想做什么，请纠正我）：）你说得对。这正是我想知道的。事情是以前当我尝试初始化数据一次并循环可视化时，它不起作用。这正是我在每次迭代中初始化数据的原因。我想这就是为什么可视化会消耗更多的内存，对吗？那我该怎么做呢。我的意思是初始化数据一次，然后对CSV文件中的每个元素进行迭代？我很高兴这有帮助：）

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