JS内のBokehプロットを更新する

Question

私は、DataTables（jQuery用のテーブルプラグイン）を使用してテーブルをレンダリングするためにJavascriptで開発中です。私はまた、ブートストラップマルチセレクション（https://github.com/davidstutz/bootstrap-multiselect）を使ってテーブルをフィルタリングしています。テーブルを再描画するたびに私のBokehJSプロットを再描画したいと思います。私は正しい呼び出しを接続しましたが、グラフを再描画するためにBokeh.Plotting.showを呼び出しています。これにより、最後に作成されたdivを削除して、複数のグラフが描画されないようにします。私はBokehのJS側には新しく、JSのプロットを更新するためのよりクリーンなメソッドがあるかどうかを知りたがっていますか？

var eventFired = function (type) { 
    //var n = $('#demo_info')[0]; 
    //n.innerHTML += '<div>'+type+' event - '+new Date().getTime()+'</div>'; 
    //n.scrollTop = n.scrollHeight; 

    var plt = Bokeh.Plotting; 

    // set up some data 
    var M = 25; 
    var xx = []; 
    var yy = []; 
    var colors = []; 
    var radii = []; 
    for (var y = 0; y <= M; y += 4) { 
     for (var x = 0; x <= M; x += 4) { 
      xx.push(x * (Math.random() +0.5)); 
      yy.push(y * (Math.random() +0.5)); 
      colors.push(plt.color(50+8*x, 30+8*y, 150)); 
      radii.push(Math.random() * 0.4 + 1.7) 
     } 
    } 

    // create a data source 
    var source = new Bokeh.ColumnDataSource({ 
     data: { x: xx, y: yy, radius: radii, colors: colors } 
    }); 

    // make the plot and add some tools 
    var tools = "pan,crosshair,wheel_zoom,box_zoom,reset,save"; 
    var p = plt.figure({ title: type+' event - '+new Date().getTime(), 
         height: 300, 
         width: 300, 
         tools: tools }); 

    // call the circle glyph method to add some circle glyphs 
    var circles = p.circle({ field: "x" }, { field: "y" }, { 
     source: source, 
     radius: radii, 
     fill_color: colors, 
     fill_alpha: 0.6, 
     line_color: null 
    }); 

    //remove old plot on update conditions 
    $('.bk-root').remove(); 

    // Show the plot, appending it to the end of the current 
    // section of the document we are in. 

    Bokeh.Plotting.show(p, document.getElementById('myplot')); 
    //To Do: add in transition to improve the UI appearance 
} 

ここで、BokehJSスクリプトにコールバックを設定するデータテーブルがあります。

</script> 
     $('#table').DataTable({ 
    responsive: { 
     details: { 
      display: $.fn.dataTable.Responsive.display.modal({ 
       header: function (row) { 
        var data = row.data(); 
        return 'Details for '+data[0]+' '+data[1]; 
       } 
      }), 
      renderer: $.fn.dataTable.Responsive.renderer.tableAll({ 
       tableClass: 'table' 
      }) 
     } 
    }, 
    paginate: false, 
    info: false, 
    paging: true, 
    autoWidth: true, 
    dom: '<"dt-buttons">Bf<"clear">lirtp', 
    "buttons": [ 'copy', 'csv', 'excel' ], 
    }).on('draw.dt', function() { eventFired('Draw'); }); 

最後に、再プロットの外観を改善するためにトランジション効果を経由してプロットを更新するための良い方法はありますか？

Answer 1

最終的に、変更されたユースケースのプロセスのすべてのコンポーネントが上記のものと比較してわかりました。私の現在のアプローチでは、ソースデータを利用して「変更」トリガーを出す必要がありました。

source.data.factors = [my new factor list] 
source.trigger('change'); 

jQueryデータテーブルに基づく新しい因子リストは、以下のように取得できます。

$('mytable').DataTable().columns(0, {search: 'applied'}).data()[0] 

また、私はカテゴリカル軸で作業しています。私の特定のユースケースでは、グラフの再描画時に私の要素が動的に変化します。これは、プロットの属性を使用して実現できます。

p.attributes.x_range.factors = [ my new factor list from my updated source data] 

あり、古いプロットを除去する必要もありませんし、追加のプラスは再描画が私の簡単なプロットのための非常に高速です。