javascript - 使用 d3.json 事件处理程序时如何正确控制上下文

Question

我正在尝试在自执行匿名函数中使用 d3.js 实现异步请求。

我使用d3.json(url)首先创建请求对象，然后注册一个“load”，而不是说d3.json(url,callback)在使用 xhr.get 启动请求之前使用 xhr.on 监听事件。

这是一个示例，在我的对象中，我有一个渲染图表的渲染函数。我想在从 API 加载数据后调用此渲染函数。调用正确，但在我的渲染函数中我无法调用我的 parseData 函数。看来我已经丢失了 this 上下文。

控制台抛出此异常:Uncaught TypeError: this.parseData is not a function

我做错了什么吗？谢谢

(function() {
  var Ploter = {
    render: function(jsondata) {
        this.parseData(jsondata); // where the error is raised
        // draw the line chart
        // ....
    },

    parseData: function(data) {
        console.log(data);
    },

    init: function() {
        this.bindEvents();
    },

    bindEvents: function() {
        var self = this;
        d3.json(this.DATAURL)
            .on("load", this.render)
            .on("error", function(error) { console.log("failure!", error); })
            .get();
    }
 Ploter.init();
})();

Answer 1

您可以将其包装在另一个函数中，创建一个闭包，而不是直接传递该函数。内部函数将能够引用您存储在 self 中的值，该值引用您要查找的原始 Ploter:

bindEvents: function() {
    var self = this;
    d3.json(this.DATAURL)
        .on("load", function(data) { self.render(data); })