D3 selectAll.remove（）滯後於d3.select.remove（）

對於我說的是滯後的快速可視化表示：D3 selectAll.remove（）滯後於d3.select.remove（）

http://tedxiao.me/ReachabilityD3/Iteration5/iteration5.html沒有滯後。

http://tedxiao.me/ReachabilityD3/Iteration6/iteration6.html有些滯後。

在這兩種情況下，我從一個CSV文件中讀取我的數據（在一種情況下，我用d3.csv，其他情況下，我使用d3.text - 這不應該是一個問題）

用於與LAG的D3：

var line = d3.svg.line() 
.interpolate("linear") 
.x(function(d) { return xScale(d.x1); }) 
.y(function(d) { return yScale(d.y1); }); 

d3.selectAll("path").remove(); 

if (<CASE 1>) { 
     d3.csv(<FIRST FILE>, function(mydata) { 
      svg.append("path") 
      .datum(mydata) 
      .attr("d", line); 
     }); 
    d3.csv(<SECOND FILE>, function(mydata) { 
     svg.append("path") 
     .datum(mydata) 
     .attr("class", "line") 
     .attr("d", line); 
    }); 
} else { <CASE 2> 
    d3.csv(<THIRD FILE>, function(mydata){ 
     svg.append("path") 
     .datum(mydata) 
     .attr("class", "line") 
     .attr("d", line); 
    }); 
}

用於D3 WITHOUT LAG：

d3.text(<FIRST FILE>, function(text) { 
      var data = d3.csv.parseRows(text).map(function(row) { 
       return row.map(function(value) { 
        return -value; 
       }); 
      }); 
      // console.log(data); 
      var cliff = -1000; 
      data.push(d3.range(data[0].length).map(function() { 
       return cliff; 
      })); 
      data.unshift(d3.range(data[0].length).map(function() { 
       return cliff; 
      })); 
      data.forEach(function(d) { 
       d.push(cliff); 
       d.unshift(cliff); 
      }); 
      var c = new Conrec, 
       xs = d3.range(0, data.length), 
       ys = d3.range(0, data[0].length), 
       zs = [i], 
       width = 300, 
       height = 300, 
       x = d3.scale.linear().range([0, width]).domain([0, 
        data.length 
       ]), 
       y = d3.scale.linear().range([height, 0]).domain([0, 
        data[0].length 
       ]); 

      c.contour(data, 0, xs.length - 1, 0, ys.length - 1, xs, 
       ys, zs.length, zs);

上面的代碼是所有使用conrec.js找到的z函數的輪廓在一個特定的.csv文件。隨後的輪廓相當於我直接通過其他方法使用輪廓（輪廓保存爲.csv文件）

d3.select("svg").remove(); 
    var test = d3.select("#contour").append("svg") 
     .attr("width", width) 
     .attr("height", height) 
     .selectAll("path") 
     .data(c.contourList()) //Contour from conrec.js 
     .enter().append("path") 
     .style("stroke", "black") 
     .attr("d", d3.svg.line() 
      .x(function(d) { 
       return x(d.x); 
      }) 
      .y(function(d) { 
       return y(d.y); 
      }));

這是足夠的信息，弄清楚爲什麼D3的方法之一具有一定的滯後性，同時切換輪廓？

來源

2015-10-25 txizzle

我不確定「輪廓之間的切換」是什麼意思，但至少在最近使用Safari 9的iMac中，當更改輸入值時，在任何示例中都看不到延遲。 –

與Opera一樣。我沒有注意到任何滯後。 –

從一個切換到另一個時，輪廓是否有輕微的「閃光」？（我相信這個flash是刪除操作，然後是追加操作） – txizzle

原因是文件的處理需要一些時間，並且更新是異步進行的，而在正確的情況下，您使用已提供的數據進行同步更新。

來源

2015-10-25 07:23:01

我認爲「已提供數據」（目前沒有延遲）的情況也是異步的。我沒有發佈一些代碼，這與當前沒有延遲的處理方法一致。我用這段代碼更新了主帖。 – txizzle

我認爲兩者都是異步的，但是，我認爲這是因爲它沒有更新，它再次處理文件。「無滯後」版本更新之前提供的數據。 – Amnor

D3 selectAll.remove（）滯後於d3.select.remove（）

回答

相關問題