javascript - 在 d3 的重复方法上获得更好的性能

Question

例如，我需要为每个 attr 计算我的数据的 Math.sqrt，我怎样才能只计算一次 Math.sqrt(d)？

var circle = svgContainer.data(dataJson).append("ellipse")
    .attr("cx", function(d) {
        return Math.sqrt(d) + 1
    })
    .attr("cy", function(d) {
        return Math.sqrt(d) + 2
    })
    .attr("rx", function(d) {
        return Math.sqrt(d) + 3
    })
    .attr("ry", function(d) {
        return Math.sqrt(d) + 4
    });

有什么优雅/表演模式吗？我是这样想的:

var aux;
var circle = svgContainer.data(dataJson).append("ellipse")
    .attr("cx", function(d) {
        aux = Math.sqrt(d);
        return aux + 1
    })
    .attr("cy", function(d) {
        return aux + 2
    })
    .attr("rx", function(d) {
        return aux + 3
    })
    .attr("ry", function(d) {
        return aux + 4
    });

Answer 1

D3 的一个被低估的特性是 local variables 的概念这是在版本 4 中引入的。这些变量允许您在节点上存储信息(这就是它被称为 local 的原因)，而与可能绑定(bind)到该节点的数据无关。您不必为了存储额外信息而膨胀数据。

D3 locals allow you to define local state independent of data.

与其他方法相比，使用局部变量的主要优势可能是它可以顺利地融入经典的 D3 方法；无需引入另一个循环来保持代码整洁。

使用局部变量来存储预先计算的值可能是人们能想象到的最简单的用例。另一方面，它完美地说明了 D3 的局部变量是什么:Store一些复杂的信息，可能需要在节点本地创建繁重的工作，以及 retrieve它供以后在您的代码中进一步使用。

无耻地复制和改编 Gerardo 的答案中的代码，解决方案可以这样实现:

var svg = d3.select("svg");

var data = d3.range(100, 1000, 100);

var roots = d3.local();   // This is the instance where our square roots will be stored

var ellipses = svg.selectAll(null)
  .data(data)
  .enter()
  .append("ellipse")
  .attr("fill", "gainsboro")
  .attr("stroke", "darkslateblue")
  .attr("cx", function(d) {
    return roots.set(this, Math.sqrt(d)) * 3;  // Calculate and store the square root
  })
  .attr("cy", function(d) {
    return roots.get(this) * 3;                // Retrieve the previously stored root
  })
  .attr("rx", function(d) {
    return roots.get(this) + 3;                // Retrieve the previously stored root
  })
  .attr("ry", function(d) {
    return roots.get(this) + 4;                // Retrieve the previously stored root
  });

<script src="//d3js.org/d3.v4.min.js"></script>
<svg></svg>