如何使用Python / Flask / Jinja将外部（跨域）JSON加载到D3.js中？

Question

[我对所有标记的语言都是陌生的，所以请保持谦虚！]

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

我想从网址直接将json加载到d3.js，但是在我的本地机器上，它已被客户端阻止

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

和AFAIK是直接从另一个域的javascript直接加载是不行，而且无论如何都是服务器端配置，我敢肯定我在Heroku中没有访问权限。

因此，作为一种解决方法，我正在Python中按如下方式加载它：

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

然后，我通过jinja参数将python中的json传递给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变量传递给d3.json，该变量返回Uncaught TypeError: Cannot read property 'objects' of undefined ？
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")

而且有效！

真正帮助我的是插入debug; queue后的语句以查看所有内容处于什么状态。这确认json_response确实与地震.json完全相同，并鼓励我再次检查代码是否有错误。