同一 HTML 页面上的多个 mpld3 图表上的 ClickInfo 插件问题

Question

我在同一个 HTML 页面上有两个 matplotlib 散点图 plot 图表（使用 mpld3.fig_to_html 渲染）。 我正在尝试使用此 ClickInfo 插件使图表上的每个点都可点击（打开另一个 window 显示更多信息）。

为这些图表生成的 HTML 显示不同的 id，但是当单击每个点将错误信息传递到它打开的页面时，一个图表的 id 会与另一个图表的 id 混淆。 关于如何使用mpld3.get_element(this.props.id, this.fig);限制搜索元素的信息不多。 .

如果我在同一页面上只有一个图表，则此插件可以完美运行。

有一个解决方案使这个插件适用于这个用例将是一个很大的帮助。

class ClickInfo(plugins.PluginBase):    
    JAVASCRIPT = """
    mpld3.register_plugin("clickinfo", ClickInfo);
    ClickInfo.prototype = Object.create(mpld3.Plugin.prototype);
    ClickInfo.prototype.constructor = ClickInfo;
    ClickInfo.prototype.requiredProps = ["id","urls"];
    function ClickInfo(fig, props){
        mpld3.Plugin.call(this, fig, props);
    };
    
    ClickInfo.prototype.draw = function(){
        var obj = mpld3.get_element(this.props.id, this.fig);
        urls = this.props.urls;
        obj.elements().on("mousedown",function(d, i){window.open(urls[i], '_blank')});

    }
    """
    def __init__(self, points, urls):
        self.points = points
        self.urls  = urls
        if isinstance(points, matplotlib.lines.Line2D):
            suffix = "pts"
        else:
            suffix = None
        print("+++", mpld3.utils.get_id(points, suffix))
        self.dict_ = {"type": "clickinfo","id": mpld3.utils.get_id(points, suffix=suffix, prefix='el'),"urls":urls}

Answer 1

刚刚发现我拥有的 mpld3 package 版本（0.5.2）具有PointHTMLTooltip的目标参数，该参数接受 url 列表，单击时会在新窗口/选项卡上打开 url 并完美运行。 无需使用 ClickInfo。

mpld3.plugins.PointHTMLTooltip(self, points, labels=None, targets=None, hoffset=0, voffset=10, css=None)