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

Question

I have two matplotlib scatter plot charts (rendered using mpld3.fig_to_html) on the same HTML page. I'm trying to make each point on the chart clickable (to open another window showing more info) using this ClickInfo plugin.

The generated HTML for these charts shows different id's, however the id of one chart gets mixed up with the other when each point is clicked passing the wrong info to the page it opens. There's not much info on how will I restrict search for elements using mpld3.get_element(this.props.id, this.fig); .

If I only have one chart on the same page, this plugin works perfectly.

Would be a great help to have a solution to make this plugin work for this use case.

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

Just found out that the version I have (0.5.2) of the mpld3 package has a targets parameter for PointHTMLTooltip that accepts a list of urls, when clicked opens the url on a new window/tab and works perfectly. No need to use ClickInfo.

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