Question

我正在使用Javascript开发使用DataTables（用于jQuery的表插件）呈现表。我也使用Bootstrap Multiselect（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]

也没有必要删除旧的情节，添加的加号是我的简单情节的重绘速度非常快。

用JS更新Bokeh Plot

1 个答案: