Question

我正在制作一些包含链接信息的mpld3图。我想点（当前显示工具提示）是可点击的。现在，我可以将HTML链接嵌入到工具提示中，但它们不可点击，因为如果您尝试将鼠标悬停在工具提示上，则工具提示会消失。这可能吗？

这是一个示例页面，展示了我所做的以及我的想法： http://www.eso.org/~aginsbur/EAACTF/EAACTF_plots_long.html

编辑：根据接受的答案，我的解决方案是：

class ClickInfo(mpld3.plugins.PluginBase):
    """mpld3 Plugin for getting info on click
    Comes from:
        http://stackoverflow.com/a/28838652/814354
    """

    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);
        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
        self.dict_ = {"type": "clickinfo",
                      "id": mpld3.utils.get_id(points, suffix),
                      "urls": urls}

然后像这样使用：

                    tooltip = mpld3.plugins.PointHTMLTooltip(points, labels,
                                                             voffset=10,
                                                             hoffset=10)
                    mpld3.plugins.connect(fig, tooltip)
                    mpld3.plugins.connect(fig, ClickInfo(points, urls))

Answer 1

我认为您可以创建一个新的插件来执行此操作。这是an example plugin that pops up an alert when a point is clicked。

您可以通过将alert(...);更改为window.open(url, '_blank')});来修改它以打开新页面：

   class ClickInfo(mpld3.plugins.PluginBase):
    """mpld3 Plugin for getting info on click        """

    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);
        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
        self.dict_ = {"type": "clickinfo",
                      "id": mpld3.utils.get_id(points, suffix),
                      "urls": urls}


fig, ax = plt.subplots()
points = ax.scatter(np.random.rand(50), np.random.rand(50),
                    s=500, alpha=0.3)
urls = ["http://example.com/#%d"%i for i in range(50)]

plugins.connect(fig, ClickInfo(points, urls))
mpld3.display()

可点击的点和可点击的工具提示

1 个答案: