2

我正在开发一个使用CefSharp包装CEF 项目以允许使用 C# 的应用程序。我在 C# 端收集数据并将数据发送到 JavaScript 以操作到可视化显示中。我正在使用D3.js将数据转换为折线图。大约有 15 个图表会逐个更新。我正在使用 C# 中的以下函数测试折线图的刷新率/渲染：

public void RunTest1()
{
    //Fake data for UI testing
    //=====================================================
    int x = 0;
    Random random = new Random();
    while (x < 50)
    {
        int y = 0;
        while (y < this.sensors.Length)
        {
            //Generate random reading between 30-40
            float num = random.Next(30, 41);

            //Add the number to the next sensor
            this.sensors[y].addReading(num);  
            y++;
        }
        x++;
    }
    //=====================================================

    this.TestCompleted();
}

每次向sensor数组添加新数据时，都会触发 UI 线程中的事件。该事件启动一个新线程，并将消息发送到 JavaScript。以下是触发事件时触发的代码：

private void newDataRead(object sender, PropertyChangedEventArgs e)
{
    //Grab the id from the propertyname
    string functionName = e.PropertyName;
    string sensorID;
    if (functionName.Length < 14) //ID is last character
    {
        sensorID = functionName.Substring(12, 1);
    }
    else //ID is last two characters
    {
        sensorID = functionName.Substring(12, 2);
    }

    //Grab the correct dataset
    int x = Convert.ToInt32(sensorID);
    float[] dataSet = test.sensors[x].readingsToArray();
    string script = String.Format(
        "window['addData']({0},{1});" +
        "window['updateSensor']({0}, {2});",
        x, dataSet[dataSet.Length - 1], test.mode);

    ExecuteJavaScript(script);
}

private void ExecuteJavaScript(string script)
{
    Thread executeThread = new Thread(new ThreadStart(() => webView.ExecuteScript(script)));
    executeThread.Start();
}

在 JavaScript 方面，如果我在外部测试循环中运行 10 次或更少的迭代，一切都很酷，但是一旦我开始超过 10 次，我就会看到明显的减速，超过 50 次的任何东西都开始变得相当滞后。这就是我在 JavaScript 端使用 D3.js 更新图表的方式：

//Called from C#
function addData(index, value) {
    dataSet[index].push(value);
}

//Called from C#
function updateSensor(index, test) {
    switch (test) {
        case 0:
            updateSensorTest1(index);
            break;
        case 1:
            updateSensorTest2(index);
            break;
        case 2:
            updateSensorTest3(index);
            break;
    }
}

//Called from JavaScript
function updateSensorTest1(index) {
    var width = $('#t1-graph-' + index).width();
    var height = $('#t1-graph-' + index).height();

    if (index == 15) {
        loop_count++;
        $('#t1-loop-count').text(loop_count);
    }

    var svg = d3.select('#t1-svg-' + index);

    //Define domain and range of dataSet
    x = d3.scale.linear()
        .domain([0, dataSet[index].length])
        .range([0 + padding, width - padding]);

    //Define lines
    line = d3.svg.line()
        .x(function(d, i) { return x(i); })
        .y(function(d) { return -1 * y(d); });

    //Path the lines
    svg.selectAll("path")
        .attr("d", line(dataSet[index]));

    //Update avg-temp
    var sum = 0;
    var end = dataSet[index].length;
    for (var i = 0; i < end; i++) {
        sum += dataSet[index][i];
    }
    $('#t1-avg-temp-' + index).text('Avg Temp: ' + (parseFloat((sum / i).toFixed(2))));
}

dataSet是一个数组，结构如下：

var dataSet = [[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[]];

我可以在 JavaScript 方面做些什么来加快渲染/刷新速度吗？在 100 之后的某些时候，它只是陷入困境，并且它确实喜欢一次刷新 50 帧的更新......

提前感谢您的帮助！

4

0 回答 0