javascript - D3 调度传入参数和调用上下文

Question

据我所知，在 D3 中，调度可用于根据 this example 将事件触发到多个可视化。 .

我还了解到，如果我想从对象调用调度并传入上下文，我可以使用 apply ，如下所示 here .

但是，我很难将 D3 调度中的参数与我想要的上下文结合起来。

// create my dispatcher
var probeDispatch = d3.dispatch("probeLoad");
var line_count = 0;

// load a file with a bunch of JSON and send one entry every 50 ms
var lines = [[0,1],[1,2],[2,0]];
var parse_timer = window.setInterval(
    function () {
        parse_dispatch();
    }, 50
);

function parse_dispatch(){
  // send two arguments with my dispatch
  probeDispatch.probeLoad(lines[line_count][0], lines[line_count][1]);
  line_count += 1;
  if(line_count >= lines.length){
    //line_count = 0
    window.clearInterval(parse_timer);
  }
}

// my chart object
var genChart = function(label){
  this.label = label;
  // assume I've drawn my chart somewhere here
  probeDispatch.on(("probeLoad."+this.label), this.probeParse);
  // this next line isn't working, since the
  // console.log in probeLoad still returns undefined
  probeDispatch.probeLoad.apply(this);
};

genChart.prototype = {
    probeParse: function(probeData, simTime) {

      // How do I get the context from the object that's calling probeParse
      // into the probeParse scope?
      var self = this;
      console.log(self.label);
    }
};

new genChart("pants");
new genChart("shirt");

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

Answer 1

当您在控制台中看到“pants”时，它确实正确设置了上下文。

但是有 3 个未定义的记录，因为你还调用了

  // send two arguments with my dispatch
  probeDispatch.probeLoad(lines[line_count][0], lines[line_count][1]);

不提供上下文。

你需要

probeDispatch.probeLoad.apply(instanceOfGenChart, [lines[line_count][0], lines[line_count][1]]);

但启用此功能还需要将 parse_dispatch 移至页面下方。

// create my dispatcher
var probeDispatch = d3.dispatch("probeLoad");
var line_count = 0;

// load a file with a bunch of JSON and send one entry every 50 ms
var lines = [[0,1],[1,2],[2,0]];
var parse_timer = window.setInterval(
    function () {
        parse_dispatch();
    }, 50
);

// my chart object
var genChart = function(label){
  this.label = label;
  // assume I've drawn my chart somewhere here
  probeDispatch.on(("probeLoad."+this.label), this.probeParse);
  // this next line isn't working, but I don't know what to do
  probeDispatch.probeLoad.apply(this);
};

genChart.prototype = {
    probeParse: function(probeData, simTime) {

      // How do I get the context from the object that's calling probeParse
      // into the probeParse scope?
      var self = this;
      console.log(self.label);
    }
};

var instanceOfGenChart = new genChart("pants");

function parse_dispatch(){
  // send two arguments with my dispatch
  probeDispatch.probeLoad.apply(instanceOfGenChart, [lines[line_count][0], lines[line_count][1]]);
  line_count += 1;
  if(line_count >= lines.length){
    //line_count = 0
    window.clearInterval(parse_timer);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>