javascript - 如何使用 Python/Flask/Jinja 将外部(跨域)JSON 加载到 D3.js 中？

Question

[我对所有标记的语言都不熟悉，所以要温柔!]

我正在 Heroku 上构建一个小应用程序，它使用 d3.js 在世界地图上显示 JSON 数据。

我想从 url 直接加载 json 到 d3.js，但在我的本地盒子上它被客户端阻止了

GET http://earthquake-report.com/feeds/recent-eq?json net::ERR_BLOCKED_BY_CLIENT

据我所知，直接从另一个域的 javascript 加载是不行的，而且无论如何这是服务器端配置，我很确定我无权在 Heroku 中访问它。

因此，作为解决方法，我在 Python 中加载它，如下所示:

earthquake_url = "http://earthquake-report.com/feeds/recent-eq?json"
response = urllib2.urlopen(earthquake_url)
json_response = json.load(response)

然后我通过 jinja 参数将 json 从 python 传递到 d3.js:

return render_template('main.html', json_response=json.dumps(json_response), **templateData)

在 javascript 方面，以下内容为我提供了一个对象，当从本地文件加载时，该对象看起来与 json 完全相同:

var json_response = {{ json_response|safe }}
console.log(json_response)

queue()
    .defer(d3.json, "/static/js/readme-world.json")
    .defer(d3.json, "/static/js/earthquake.json")
    .await(ready);

function ready(error, world, data) {
    console.log(data)

我要问的是:

1. 如何将下载的 json 数据传递到 d3 中的“绘图”函数？
2. 为什么我无法将 json_response 变量传递给返回 Uncaught TypeError: Cannot read property 'objects' of undefined 的 d3.json？
3. 为什么我不能直接从 url 加载到 d3 中？

Answer 1

好吧，看来我是傻了。我将此代码更改如下:

queue()
    .defer(d3.json, "/static/js/readme-world.json")
    .defer(d3.json, "/static/js/earthquake.json")
    .await(ready);

function ready(error, world, data) {
    console.log(data)

对此:

queue()
    .defer(d3.json, "/static/js/readme-world.json")

    .await(ready);

function ready(error, world) {
    console.log(data)

并将我的 json_response 插入到我的数据连接代码中，如下所示:

var g = svg.append("g");

        g.selectAll("circle")
           .data(json_response)
           .enter()
           .append("circle")

而且它有效!

真正对我有帮助的是在 queue 之后插入一个 debug; 语句来查看一切都处于什么状态。这证实了 json_response 确实与地震完全相同。 json 并鼓励我再次检查代码是否有错误。