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

【问题标题】：How is external (cross-domain) JSON loaded into D3.js using Python/Flask/Jinja?如何使用 Python/Flask/Jinja 将外部（跨域）JSON 加载到 D3.js 中？
【发布时间】：2014-06-07 20:22:49
【问题描述】：

[我对所有标记的语言都很陌生，所以要温柔！]

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

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

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

并且直接从另一个域的 javascript 加载 AFAIK 是不行的，无论如何都是服务器端配置，我很确定我无法在 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)

我要问的是：

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

【问题讨论】：

标签： javascript python json d3.js jinja2

【解决方案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 完全相同，并鼓励我再次检查我的代码是否有错误.

【讨论】：