方法鏈接 - d3.js

It說D3.js中的方法鏈接在單行代碼中執行多個操作。但我不確定它在執行時關心的是性能。方法鏈接 - d3.js

例如，通過方法鏈接，我們希望將代碼象下面這樣：

var data =[10,20,30,40] 
wrap.selectAll("rect") 
     .data(data) 
     .enter() 
     .append("rect") 
     .attr("x",function(d, j) {return scale(j); }) 
     .attr("y",function(d,i){ return (h-d)}) 
     .attr("width",scale.rangeBand()) 
     .attr("height",function(d,i){ return (d)}) 
     .style("fill","red");

在上述代碼中，它會產生4個矩形，然後爲每個4個矩形我們設置的屬性「X」，「Y」，「寬度」，「高度」。

節數矩形---> 4節數屬性（「X」，「Y」，「寬度」，「高度」） ---> 4節數重複中的每個屬性 - - > 4（正弦4個矩形）4個屬性的迭代次數---> 4 * 4 = 16次

這樣的迭代次數真的需要嗎？

通常我們做這樣的，

wrap.forEach(function(d,i){ 
      d.setAttribute("x", scale(i)) 
      d.setAttribute("y",(h-d)) 
      d.setAttribute("width",w) 
      d.setAttribute("height",h) 

})

在上述方法中，節數反覆使用 - > 4

所以什麼d3.js方法鏈的優勢，用上面提到的傳統方法選擇.daa 請說清楚??

來源

2014-04-07 dakshna

不確定你的意思是「迭代」。通常，方法鏈可以讓你編寫更簡潔的代碼。你擔心演出有什麼特別的原因嗎？ –

是的，迭代意味着在這裏執行循環的次數。 ofcourse方法鏈給出了更簡潔的代碼。但是執行的性能如何（執行循環所需的時間） – dakshna

代碼中沒有循環。 –

記住迭代本身的行爲是微不足道的。如果設置屬性的成本是1，那麼您將16 * 1與4 * 4進行比較。因此，這不是一個大問題。鏈接是一個簡潔的問題。

使用Big O notation來分析算法，都是O（n）。

來源

2014-04-07 10:23:57

如果您假定獲取對象的引用的成本與在已引用的對象上設置屬性的成本相同。這個差別可能是微不足道的，我不確定，但這是一個有趣的問題。話雖如此，你和Lars指出的簡潔問題是一個好點。 – FernOfTheAndes

@John Kiernander 我不提「設置屬性的代價」爲「1」。我在考慮沒有任何時間循環被執行。通過d3.js方法鏈接，4矩形， >節數次循環exected =節數屬性 > >按照常規的方式，循環將一次性任何節數屬性 – dakshna

執行，那麼您在d3中有更多的循環執行是正確的，但我認爲它在性能方面並不重要。如果任何d3可能會稍微好一些，因爲@FernOfTheAndes指出，d3保存對象引用，但是您正在談論幾個時鐘週期。 –

我今天在想這個。

我認爲鏈接存在根本性問題。即，您不能將數據分區成容易的不同形狀。而且，如果可以的話，你不能假設從不同形狀鏈接的類似屬性。一個正方形和一個圓圈表示，具有不同的屬性來定義它們的大小和位置。

但是，從這個衝突中分配出來的，不是通過符號解決的，仍然存在一個問題，你問了，「這是一個有效的表示嗎？」

它使代碼看起來不錯。但是，實際上，每一個函數調用都可以深入堆棧以發生任何事情。而且，這很慢。

因此，人們開始考慮類似於你的循環的替代方案。或者，也許這些屬性可以在最後一個鏡頭中收集和分配 - 幾乎是一個彙編。

不要忘了解釋JavaScript。

很容易被人誤以爲JavaSript會在某些應用程序中提供您正在尋找的效率。當然，一個疲憊的用戶點擊它並不會注意到這個差異。但是，當變化以某種方式級聯時，有動畫和工作部分的交互。某些應用程序確實需要效率。

即使您正在使用的forEach可能會被懷疑。去年我和一個年輕的程序員一起工作，使用D3。而且，我們其中一臺顯示器的某些部分的運行速度非常緩慢。（一個疲憊的使用者肯定已經被喚醒成爲一頭眩暈）。我們將它從forEach中取出，並在普通的「for」循環結構中運行。然後，相同的代碼以令人難以置信的速度運行。所以，有些部分JavaScript並沒有像你想象的那樣準備好黃金時段。

使用很多新的構造可能會更好，這些構造正在進入應用程序許多部分的語言中。但是，當它計數時，您可能會等待一些更新並使用更優化的語言部分。

我相當確信d3在設置屬性方面並不是最佳的。而且，現在我正試圖考慮比鏈接更好的表示。

來源

2016-09-01 02:35:41

方法鏈接 - d3.js

回答

相關問題