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

【问题标题】：ClickInfo plugin problem on multiple mpld3 charts on same HTML page同一 HTML 页面上的多个 mpld3 图表上的 ClickInfo 插件问题
【发布时间】：2021-04-27 18:00:41
【问题描述】：

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

为这些图表生成的 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}

【问题讨论】：

标签： javascript python matplotlib mpld3

【解决方案1】：

刚刚发现我拥有的 mpld3 软件包版本 (0.5.2) 有一个 targets 参数，用于 PointHTMLTooltip 接受 url 列表，单击时打开新窗口/选项卡上的 url 并完美运行。无需使用 ClickInfo。

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

【讨论】：