plotly_click不会触发

时间:2019-08-15 21:30:25

标签: onclick plotly plotly.js plotly-python

在此示例https://community.plot.ly/t/hyperlink-to-markers-on-map/17858/6之后,我试图使散点图的点可点击(具体来说,单击时打开网页)。如何在单击数据点时触发click事件?

这是一个python turbogears应用,其中plotly_click事件发生在js中。我正在使用plotly.js v1.44.1.。像示例中一样,我首先创建fig

plotlyHtml = webhelpers2.html.literal(plotly.offline.plot(fig, include_plotlyjs=True, output_type='div'))

然后我在图中找到一个div

res = re.search('<div id="([^"]*)"', plotlyHtml)
div_id = res.groups()[0]

然后,如示例所示,我构建一个js callback并将其插入模板的script标记中。这是注入到html中的脚本标签:

<script type="text/javascript">


        var plot_element = document.getElementById('3f56277f-e84b-4b68-ae85-91d3cd62d01c');
        console.log('callback js has been added to page. did we get plot_element?');
        console.log(plot_element);

        plot_element.on('plotly_click', function(data){
            console.log('Im inside the plotly_click!!');
            console.log(data);
            var point = data.points[0];
            if (point) {
                console.log(point.customdata);
                window.open(point.customdata);
            }
        })


</script>

呈现页面时,将在事件侦听器之前打印前两个console.log语句,这意味着js已成功注入html中。特别地,plot_element是带有class="plotly-graph-div js-plotly-plot"的div。但是,单击散点图上的点永远不会导致任何结果,错误,事件或控制台日志语句。我至少希望if中的控制台日志语句发生。我是否选择了错误的div ID?

1 个答案:

答案 0 :(得分:0)

问题出在我的layout中。我有'clickmode': 'select',把事情搞砸了。删除已启用的事件即可按预期触发。