Question

It表示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个矩形，我们设置属性＆＃34; x＆＃34;，＆＃34; y＆＃34;，＆＃34; width＆＃34; ＆＃34;高度＆＃34;

矩形的数量---＆gt; 4号属性（＆＃34; x＆＃34;，＆＃34; y＆＃34;，＆＃34;宽度＆＃34;，＆＃34;高度＆＃34;） ---＆GT; 4每个属性的迭代次数---＆gt; 4（正弦4矩形）4个属性的迭代次数---＆gt; 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)

})

在上述方法中，使用的迭代次数 - ＆gt; 4

因此，使用上述传统方法，d3.js方法链接和selection.daa的优势是什么请澄清一下??

Answer 1

我今天在想这个。

我认为链接存在根本问题。也就是说，您无法轻松地将数据划分为不同的形状。而且，如果可以的话，你不能假设从不同形状链接的类似属性。方形和圆形表示，具有不同的属性来定义它们的大小和位置。

但是，从这场冲突中分配出来的，没有用符号来解决，仍然有一个问题，你问过， “这是一种有效的代表吗？”

它使代码看起来不错。但是，实际上每个函数调用都可以在深层堆栈中执行任何操作。而且，这很慢。

因此，人们开始考虑类似于你的循环的替代方案。或者，也许可以在最后一次拍摄中收集和分配属性 - 几乎是编译。

不要忘记解释JavaScript。

很容易被欺骗认为JavaSript将提供您在某些应用程序中寻找的效率。当然，一个疲惫的用户点击这个，并没有注意到差异。但是，当变化以某种方式级联时，存在动画和工作部分的交互。某些应用程序确实需要效率。

即使您正在使用的forEach也可能存在疑问。去年我使用D3与一位年轻的程序员合作。并且，我们的一个显示器的某些部分运行缓慢。（疲惫的使用肯定会被唤醒。）我们将它从forEach中取出并以常规的“for”循环结构运行。然后，相同的代码以惊人的速度运行。因此，有些部分JavaScript没有像您想象的那样为黄金时间做好准备。

最好使用许多新的构造，这些构造正在进入应用程序的许多部分的语言。但是，当它重要时，您可能会等待一些更新并使用该语言的更优化部分。

我很确定d3在设置属性方面不是最佳的。而且，现在我试图想出一些比链接更好的表现形式。

Answer 2

请记住，迭代本身的行为可以忽略不计。如果设置属性的成本为1，则将16 * 1与4 * 4进行比较。因此，这不是一个大问题。链接是一个简洁的问题。

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

方法链接-d3.js

2 个答案: