何时创建Crosstalk.SelectionHandle

Question

创作页面https://rstudio.github.io/crosstalk/authoring.html说要在返回renderValue和resize之前在工厂范围内创建sel_handle。这是必要的（例如，需要在调用renderValue之前创建它），还是可以在renderValue()中创建并将其连接到scatter？我指的是该页面的示例代码，即

HTMLWidgets.widget({
  name: 'd3scatter',
  type: 'output',
  factory: function(el, width, height) {
    var firstRun = true;
    var scatter = d3scatter(el).width(width).height(height);
    var sel_handle = new crosstalk.SelectionHandle();
    scatter.on("brush", function(keys) {
      sel_handle.set(keys);
    });
    sel_handle.on("change", function(e) {
      if (e.sender !== sel_handle) {
        scatter.clearBrush();
      }
      scatter.selection(e.value);
    });
    return {
      renderValue: function(x) {
        var value = x.data;
        scatter
          .x_var(value.x_var)
          .y_var(value.y_var)
          .color_var(value.color_var)
          .color_spec(value.color_spec)
          .x_label(value.x_label)
          .y_label(value.y_label)
          .x_lim(value.x_lim)
          .y_lim(value.y_lim)
          .key(x.settings.crosstalk_key);
        sel_handle.setGroup(x.settings.crosstalk_group);
        scatter(!firstRun);
        firstRun = false;
      },
      resize: function(width, height) {
        scatter.width(width).height(height)(false);
      }
    };
  }
});

我正在考虑将创建放入renderValue()中，因为在许多情况下，我的小部件不会使用sharedData，因此我不想在crosstalkLibs中不必要地链接。但是直到我在renderValue中第一次看到x之前，我才知道这一点。

示例代码可能最终会出现类似的内容：

HTMLWidgets.widget({
  name: 'd3scatter',
  type: 'output',
  factory: function(el, width, height) {
    var firstRun = true;
    var scatter = d3scatter(el).width(width).height(height);
    return {
      renderValue: function(x) {
        var value = x.data;
        scatter
          .x_var(value.x_var)
          .y_var(value.y_var)
          .color_var(value.color_var)
          .color_spec(value.color_spec)
          .x_label(value.x_label)
          .y_label(value.y_label)
          .x_lim(value.x_lim)
          .y_lim(value.y_lim)
          .key(x.settings.crosstalk_key);
        if (firstRun && typeof x.settings !== "undefined") {
          scatter.sel_handle = new crosstalk.SelectionHandle();
          scatter.on("brush", function(keys) {
            scatter.sel_handle.set(keys);
          });
          scatter.sel_handle.on("change", function(e) {
            if (e.sender !== sel_handle) {
              scatter.clearBrush();
            }
            scatter.selection(e.value);
          });
          scatter.sel_handle.setGroup(x.settings.crosstalk_group);
        }
        scatter(!firstRun);
        firstRun = false;
      },
      resize: function(width, height) {
        scatter.width(width).height(height)(false);
      }
    };
  }
});

这是未经测试的代码，因此可能包含错别字，但是这种一般方法会引起问题吗？

Answer 1

经过几天的实验：我的问题的答案是样本方法有效，但不是必需的。对代码的提议修改至少有一个错误：更改消息是否来自同一组件的测试应为

if (e.sender !== this) {
  scatter.clearBrush();
}

，但总的来说，方法很好。