获取mpld3图的缩放级别

Question

有没有办法读出mpld3图的缩放水平，即可见x轴和y轴的范围？我试着使用d3.behavior.zoom，但我不知道如何才能获得mpld3图形的缩放行为。

Answer 1

您可以使用我为mpld3开发的模式使以交互方式向散点图添加标注插件做到这一点。实际上，这要简单得多，所以它是一个简单但有用的插件的好例子：

import matplotlib.pyplot as plt, mpld3
%matplotlib inline

class ZoomSizePlugin(mpld3.plugins.PluginBase):
    JAVASCRIPT = r"""
    // little save icon
    var my_icon = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gUTDC0v7E0+LAAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAa0lEQVQoz32QQRLAIAwCA///Mz3Y6cSG4EkjoAsk1VgAqspecVP3TTIA6MHTQ6sOHm7Zm4dWHcC4wc3hmVzT7xEbYf66dX/xnEOI7M9KYgie6qvW6ZH0grYOmQGOxzCEQn8C5k5mHAOrbeIBWLlaA3heUtcAAAAASUVORK5CYII=";

    // create plugin
    mpld3.register_plugin("zoomSize", ZoomSizePlugin);
    ZoomSizePlugin.prototype = Object.create(mpld3.Plugin.prototype);
    ZoomSizePlugin.prototype.constructor = ZoomSizePlugin;
    ZoomSizePlugin.prototype.requiredProps = [];
    ZoomSizePlugin.prototype.defaultProps = {}

    function ZoomSizePlugin(fig, props){
        mpld3.Plugin.call(this, fig, props);

        // create save button
        var SaveButton = mpld3.ButtonFactory({
            buttonID: "save",
            sticky: false,
            onActivate: function(){save_zoom(fig);}.bind(this),
            icon: function(){return my_icon;},
        });
        this.fig.buttons.push(SaveButton);
    };

    function save_zoom(fig) {
      var ax= fig.axes[0],
          extent = "";
      extent = extent + "left=" + ax.x.invert(0);
      extent = extent + ", right=" + ax.x.invert(ax.width);
      extent = extent + ", bottom=" + ax.y.invert(ax.height);
      extent = extent + ", top=" + ax.y.invert(0);

      prompt("Copy extent of zoomed axis:", extent);
    }

    """

    def __init__(self):
        self.dict_ = {"type": "zoomSize"}

plt.plot([3,1,4,1,5,9,2,6,5,3,5,8], 'ks-', mew=1, mec='w')
mpld3.plugins.connect(plt.gcf(), ZoomSizePlugin())
mpld3.display()

对我来说，看起来是这样的：

​

这是一本木星笔记本，如果你想玩的话。