c# - D3.js と C# の通信速度とレンダリング速度

Question

私は、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 秒後のいくつかの時点で、動きが鈍くなり、1 回の更新で 50 フレーム分の更新が行われるようになります...

助けてくれてありがとう！