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

Question

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

而不是说 d3.json(url, callback)，我使用 d3.json(url) 首先创建请求对象，然后在使用 xhr.get.

这是一个示例，在我的对象中，我有一个渲染图表的渲染函数。一旦我的数据从 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); })

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

How to properly control the context when using d3.json event handler

javascript

json

anonymous-function

d3.js