同一 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)