在d3上的重复方法上获得更好的性能 [英] Getting a better performance on repeatedly method on d3

问题描述

例如，我需要为每个属性计算我的数据的Math.sqrt，如何只计算一次Math.sqrt(d)?

For example, I need to calculate a Math.sqrt of my data for each attr, how can I calculate only one time the 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
    });

有任何优雅/表演性的模式吗?我是这样想的:

Has any elegant/performative mode? I'm thinking this way:

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
    });

推荐答案

D3的一个被低估的特征是局部变量(在版本4中引入).这些变量使您可以将信息存储在节点上(这就是为什么将其称为 local )，而与节点无关.可能已绑定到该节点的数据.您不必大数据来存储其他信息.

An underestimated feature of D3 is the concept of local variables which were introduced with version 4. These variables allow you to store information on a node (that is the reason why it is called local) independent of the data which might have been bound to that node. You don't have to bloat your data to store additional information.

D3本地变量允许您定义独立于数据的本地状态.

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

使用局部变量而不是其他方法的主要优点可能是它可以平滑地适合经典D3方法；无需引入另一个循环来保持代码干净.

Probably the major advantage of using local variables over other approaches is the fact that it smoothly fits into the classic D3 approach; there is no need to introduce another loop whereby keeping the code clean.

使用局部变量仅存储预先计算的值可能是人们能想到的最简单的用例.另一方面，它完美地说明了D3的局部变量是关于什么的:存储一些复杂的信息，这可能需要繁重的工作才能在节点上本地创建，并且检索它供以后在您的代码中进一步使用.

Using local variables to just store a pre-calculated value is probably the simplest use case one can imagine. On the other hand, it perfectly illustrates what D3's local variables are all about: Store some complex information, which might require heavy lifting to create, locally on a node, and retrieve it for later use further on in your code.

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

Shamelessly copying over and adapting the code from Gerardo's answer the solution can be implemented like this:

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>

这篇关于在d3上的重复方法上获得更好的性能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！