Question

我想从JSON文件加载数据以与d3.js一起使用

我使用的是Django，JSON文件json_path的URL如下：/staticfile/example.json。我正在使用以下代码来读取数据并执行操作：

d3.json(json_path, function(error, data){
    // Do stuff with data
}

如果我在浏览器上使用服务器的本地IP：192.168.x.x，一切正常。

但是，当我使用指向foo.com的本地域192.168.x.x时，无法再从d3.json()加载数据。 {{1 }}为空，我无法理解data的内容。

我遗漏了一些可能与回调有关的明显内容，但我无法理解全局。整个Django服务器在error和192.168.x.x上都可以完美运行，并且一切都是本地的。有什么想法吗？

foo.com是：

error

我正在使用使用D3版本XMLHttpRequestmozAnon: false mozSystem: false onabort: null onerror: function respond() onload: function respond() onloadend: null onloadstart: null onprogress: function onprogress() onreadystatechange: null ontimeout: null readyState: 4 response: "" responseText: "" responseType: "" responseURL: "" responseXML: null status: 0 statusText: "" timeout: 0 upload: XMLHttpRequestUpload { onloadstart: null, onprogress: null, onabort: null, … } withCredentials: false <prototype>: XMLHttpRequestPrototype { open: open(), setRequestHeader: setRequestHeader(), send: send(), … } page:472:7的库，在这种特殊情况下无法更新。

Answer 1

通常，D3并没有像jQuery和其他库那样优先考虑真正强大的AJAX支持，因为这并不是它的重点-因此，如果要加载各种外部资源（例如json数据），则应该因此，第三方库具有对精心调整的AJAX调用的更多支持。

或者简单地使用包装在makeRequest函数中的XMLHttpRequest：

function makeRequest(url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", json_path, true);
    xhr.setRequestHeader("Content-type", "application/json");
    xhr.onreadyStatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            callback(JSON.parse(xhr.response));
        }
    };
    xhr.onerror = function(error) {
        throw error;
    }
    xhr.send(); 
};

makeRequest(json_path, function(json_response) {
    //here you can use D3 to load your json as you want
    console.log(json_response);
});

无法从本地域URL（Django静态文件）的文件中获取JSON数据

1 个答案: