javascript – 如何“转储”使用LinkedBrush插件为mpld3选择的点？

我正在尝试实现一个插件,允许用户转储有关LinkedBrush插件选择的点的相关信息.我认为我的问题与 this example有关.我通过HTMLTooltip插件将每个点都绑定了元信息.理想情况下,我也能以某种方式转储它.在我链接的示例中,信息通过提示输出.我希望能够将此信息保存到某种文本文件中.

略有不同：如何确定LinkedBrush工具选择了散点图中的哪些点,以便我可以保存信息？

解决方法

为了解决这个问题,我最终只编辑了LinkedBrush插件代码.我添加了一个按钮,单击该按钮时,使用brush.extent()输出画笔窗口的范围.这将打印最小和最大x和y坐标.我将基本上使用这些坐标追溯到输入数据集并确定哪些点落在画笔的边界内.如果有人对如何解决这个问题有更好的了解,我会欢迎它.

class LinkedBrush(plugins.PluginBase):
JAVASCRIPT="""
  mpld3.LinkedBrushPlugin = mpld3_LinkedBrushPlugin;
  mpld3.register_plugin("linkedbrush",mpld3_LinkedBrushPlugin);
  mpld3_LinkedBrushPlugin.prototype = Object.create(mpld3.Plugin.prototype);
  mpld3_LinkedBrushPlugin.prototype.constructor = mpld3_LinkedBrushPlugin;
  mpld3_LinkedBrushPlugin.prototype.requiredProps = [ "id" ];
  mpld3_LinkedBrushPlugin.prototype.defaultProps = {
    button: true,enabled: null
  };
  function mpld3_LinkedBrushPlugin(fig,props) {
    mpld3.Plugin.call(this,fig,props);
    if (this.props.enabled === null) {
      this.props.enabled = !this.props.button;
    }
    var enabled = this.props.enabled;
    if (this.props.button) {
      var BrushButton = mpld3.ButtonFactory({
        buttonID: "linkedbrush",sticky: true,actions: [ "drag" ],onActivate: this.activate.bind(this),onDeactivate: this.deactivate.bind(this),onDraw: function() {
          this.setState(enabled);
        },icon: function() {
          return mpld3.icons["brush"];
        }
      });
      this.fig.buttons.push(BrushButton);
      var my_icon = "data:image/png;base64,longstring_that_I_redacted";
      var SaveButton = mpld3.ButtonFactory({
            buttonID: "save",sticky: false,onActivate: this.get_selected.bind(this),icon: function(){return my_icon;},});
      this.fig.buttons.push(SaveButton);
    }
    this.extentClass = "linkedbrush";
  }
  mpld3_LinkedBrushPlugin.prototype.activate = function() {
    if (this.enable) this.enable();
  };
  mpld3_LinkedBrushPlugin.prototype.deactivate = function() {
    if (this.disable) this.disable();
  };
  mpld3_LinkedBrushPlugin.prototype.get_selected = function() {
    if (this.get_selected) this.get_selected();
  };
  mpld3_LinkedBrushPlugin.prototype.draw = function() {
    var obj = mpld3.get_element(this.props.id);
    if (obj === null) {
      throw "LinkedBrush: no object with id='" + this.props.id + "' was found";
    }
    var fig = this.fig;
    if (!("offsets" in obj.props)) {
      throw "Plot object with id='" + this.props.id + "' is not a scatter plot";
    }
    var dataKey = "offsets" in obj.props ? "offsets" : "data";
    mpld3.insert_css("#" + fig.figid + " rect.extent." + this.extentClass,{
      fill: "#000","fill-opacity": .125,stroke: "#fff"
    });
    mpld3.insert_css("#" + fig.figid + " path.mpld3-hidden",{
      stroke: "#ccc !important",fill: "#ccc !important"
    });
    var dataClass = "mpld3data-" + obj.props[dataKey];
    var brush = fig.getBrush();
    var dataByAx = [];
    fig.axes.forEach(function(ax) {
      var axData = [];
      ax.elements.forEach(function(el) {
        if (el.props[dataKey] === obj.props[dataKey]) {
          el.group.classed(dataClass,true);
          axData.push(el);
        }
      });
      dataByAx.push(axData);
    });
    var allData = [];
    var dataToBrush = fig.canvas.selectAll("." + dataClass);
    var currentAxes;
    function brushstart(d) {
      if (currentAxes != this) {
        d3.select(currentAxes).call(brush.clear());
        currentAxes = this;
        brush.x(d.xdom).y(d.ydom);
      }
    }
    function brushmove(d) {
      var data = dataByAx[d.axnum];
      if (data.length > 0) {
        var ix = data[0].props.xindex;
        var iy = data[0].props.yindex;
        var e = brush.extent();
        if (brush.empty()) {
          dataToBrush.selectAll("path").classed("mpld3-hidden",false);
        } else {
          dataToBrush.selectAll("path").classed("mpld3-hidden",function(p) {
            return e[0][0] > p[ix] || e[1][0] < p[ix] || e[0][1] > p[iy] || e[1][1] < p[iy];
          });
        }
      }
    }
    function brushend(d) {
      if (brush.empty()) {
        dataToBrush.selectAll("path").classed("mpld3-hidden",false);
      }
    }
    this.get_selected = function(d) {
        var brush = fig.getBrush();
        var extent = brush.extent();
        alert(extent);
    }
    this.enable = function() {
      this.fig.showBrush(this.extentClass);
      brush.on("brushstart",brushstart).on("brush",brushmove).on("brushend",brushend);
      this.enabled = true;
    };
    this.disable = function() {
      d3.select(currentAxes).call(brush.clear());
      this.fig.hideBrush(this.extentClass);
      this.enabled = false;
    };
    this.disable();
  };
    """
    def __init__(self,points,button=True,enabled=True):
        if isinstance(points,mpl.lines.Line2D):
            suffix = "pts"
        else:
            suffix = None
        self.dict_ = {"type": "linkedbrush","button": button,"enabled": False,"id": utils.get_id(points,suffix)}