可點擊的點和可點擊的工具提示

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()