小编Sar*_*ena的帖子

我通过以下代码浏览了"point-along-path"d3可视化:https://bl.ocks.org/mbostock/1705868.我注意到,虽然这一点正在沿着它的路径移动,但它消耗了7到11%的CPU使用率.

目前的情况,我有大约100条路径,在每条路径上,我将不得不将点(圆圈)从源移动到目的地.因此,随着更多点数同时移动,它占用了超过90%的CPU内存.

我试过:

                   function translateAlong(path) {
                      var l = path.getTotalLength();
                      return function(d, i, a) {
                          return function(t) {
                               var p = path.getPointAtLength(t * l);
                               return "translate(" + p.x + "," + p.y + ")";
                          };
                       };
                    }

                    // On each path(100 paths), we are moving circles from source to destination.
                    var movingCircle = mapNode.append('circle')
                        .attr('r', 2)
                        .attr('fill', 'white')

                    movingCircle.transition()
                        .duration(10000)
                        .ease("linear")
                        .attrTween("transform", translateAlong(path.node()))
                        .each("end", function() {
                            this.remove();
                        });

那么什么应该是降低CPU使用率的更好方法呢？谢谢.