方法链接 - 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

回答

相关问题