3

我正在制作一些带有链接信息的 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))
4

1 回答 1

6

我认为您可以创建一个新插件来执行此操作。这是一个示例插件，当单击某个点时会弹出警报。

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()
于 2015-03-03T17:57:52.760 回答