Question

问题在于性能。我已经实现了一个使用Java Websocket，Javascript画布和d3框架构建的实时散点图。我大多只使用d3与轴进行动态数据绑定，并进行缩放。绘图发生在画布上以获得更好的性能。

但这是问题所在。

每个被绘制的点。该点必须等待5秒，然后淡出。这会在requestanimationframe（）中运行时创建类似动画的动画，因此数据点在图形上不是静态的。后端将不断地通过websocket推送数据，因此前端（javascript）需要跟上，当用户向服务器发送新命令以停止websocket循环时，它只会停止推送数据。

问题是一次发生多个动画帧。我目前的算法是这样的。我使用d3中的d3.timer，这是一个性能动画循环。通过将每个循环的α减少1直到α<1，这给出了平滑的淡出。 5.然后退出。每个数据点都会发生这种情况。这样做的效果实际上很棒并且看起来很棒，但是一旦我开始向网页添加更多图形和功能，性能将开始陷入困境。只有散点图它可以保持38 fps。但是当在同一个动画循环中实现另一个图形时，我开始看到它恶化了。我尝试使用setTimeout（）为每个数据点重复调用每毫秒左右，但它不会给出与d3.timer给我相同的动画效果。

有没有人有更好的方法或想法如何使用图像数据给出时间间隔以及它们被后端推动绘制的时间，使数千个数据点淡出？一种方法可以将我的表现保持在28-40 fps之间？

以下是我的步骤和代码。

绘制一个点
设置超时5秒
完成超时后，运行d3.timer（d3性能动画循环）
通过重绘α淡化数据点，减少1
一旦alpha＆lt; 5.退出动画循环。

以下是代码：

scatterBase.scatter.context.putImageData(imgData, cx[k], cy[k]);

//5 second decay for now...
var _timer;
var _timeout;

_timeout = d3.timeout(function(elapsed) {

    _timer = (d3.timeout(function(elap) {
        scatterBase.timer.push(_timer);
        scatterBase.lifeCycle(imgData, cx[k], cy[k], a -= 1);
        if (a <= 5) {
            a = 255;
            scatterBase.reset = false;
            //timer.stop();
            _timer.stop();
            _timeout.stop();
        }

        if (Web.isPlaying === false) {
            _timer.stop();
        }

    }));
    if (Web.isPlaying === false) {
        _timeout.stop();
    }
}, 5000);
scatterBase.timeout.push(_timeout);
};
};

scatterBase.lifeCycle = function(imgData, cx, cy, a) {

    for (var i = 0; i < imgData.data.length; i += 4) {
        imgData.data[i + 3] = a;
    }
    scatterBase.scatter.context.putImageData(imgData, cx, cy);
};

使用javascript canvas和d3

0 个答案: