从 Flask 应用程序获取 D3 中的静态 JSON 数据答案

【问题标题】：Obtaining static JSON data in D3 from Flask app从 Flask 应用程序获取 D3 中的静态 JSON 数据
【发布时间】：2015-02-02 00:15:44
【问题描述】：

我有一个 Flask 应用程序，用于在 Heroku 上提供 D3 可视化。我的可视化在这里工作：http://wsankey.github.io/dew_mvp/ 和 Heroku 应用程序：https://dew.herokuapp.com/。问题是我的 javascript 没有获取静态 json 数据——甚至没有抛出错误。地图数据是“us.json”，我的数据是“dewmvp1.json”。

这是 D3 javascript 文件的相关部分：

$(document).ready(function() {
  //Reading map file and data
  queue()
  .defer(d3.json, "/static/us.json")
  .defer(d3.json, "/static/dewmvpv1.json")
  .await(ready);

还有我的 app.py 文件，我认为我可能会在其中路由数据：

from flask import Flask, render_template

app = Flask(__name__)
#Main DEW page
@app.route('/')
def home():
    return render_template("index.html")

#About page
@app.route('/about')
def about():
    return render_template("about.html")

#Sending the us.json file
@app.route('/usmap/')
def usmap():
    return "<a href=%s>file</a>" % url_for('static', filename='us.json')

#Sending our data
@app.route('/data/')
def data():
    return "<a href=%s>file</a>" % url_for('static', filename='dewmvp1.json')


if __name__ == '__main__':
    app.run(debug=True)

以及我的 script.js 正在加载的 index.html 的相关部分（让您了解我是如何加载它的）：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="http://d3js.org/queue.v1.min.js" type="text/javascript">
<link href="{{url_for('static', filename='topojson.v1.min.js')}}" type="text/javascript">
<link href="{{url_for('static', filename='underscore-1.6.0.min.js')}}" type="text/javascript">
<link href="{{url_for('static', filename='jquery-1.10.2.min.js')}}" type="text/javascript">
<link href="{{url_for('static', filename='jquery-ui-1.10.4.js')}}" type="text/javascript">
<link href='https://fonts.googleapis.com/css?family=Arvo:400,700|PT+Sans+Caption' rel='stylesheet' type='text/css'>
<link rel="stylesheet" media="screen" href="{{url_for('static', filename='jquery-ui-1.10.4.css')}}">
<link rel="stylesheet" media="screen" href="{{url_for('static', filename='grid.css')}}">
<link rel="stylesheet" media="screen" href="{{url_for('static', filename='layout.css')}}">
<link rel="stylesheet" media="screen" href="{{url_for('static', filename='map.css')}}">
<link rel="stylesheet" media="screen" href="{{url_for('static', filename='normalize.css')}}">
<link rel="stylesheet" media="screen" href="{{url_for('static', filename='elements.css')}}">
<link rel="stylesheet" media="screen" href="{{url_for('static', filename='typography.css')}}">
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Merriweather' rel='stylesheet' type='text/css'>
<link href="{{url_for('static', filename='d3.min.js')}}" type="text/javascript">

谢谢！

【问题讨论】：

标签： python json heroku d3.js flask

【解决方案1】：

这里发生的事情是我在我的 index.html 中使用了我应该使用的 . javascript 文件被链接但未执行。 @user2569951 说我需要 {{url_for() }} 语法来访问数据绝对正确，但真正的问题更基本。特别是我有的地方：

<link href="{{url_for('static', filename='d3.min.js')}}" type="text/javascript">

我需要：

<script src="{{url_for('static', filename='d3.min.js')}}"></script>

这对我来说真是头疼，但我当然知道标签之间的区别。管理这些文件时需要这些基础知识。

【讨论】：

【解决方案2】：

在您的 javascript 中，您需要按以下方式设置您的地图以使其可访问。

$(document).ready(function() {
  //Reading map file and data
  queue()
  .defer(d3.json, "{{url_for('static', filename='us.json')}}")
  .defer(d3.json, "{{url_for('static', filename='dewmvpv1.json')}}")
  .await(ready)

【讨论】：

感谢您的评论，但这也不是诀窍。令人沮丧的部分是它没有抛出错误......没有任何事情发生。我想知道我是否应该尝试 AJAX 路由？我想在这种情况下我将不得不重新编写我的 javascript 文件。另一个线程提到加载顺序可能是 Flask 中 javascript 的问题，但我尝试了一些变体。还有其他想法吗？感谢您的评论！
因此假设us.json' and dewmvpv1.json`位于静态文件夹的根目录中（即static/us.json而不是static/maps/us.json）。如果不是，则添加<foldername>/us.json。必须指定文件的路径。你能列出你的文件目录结构吗？
是的，这不是文件结构，而是更基本的东西。希望我可以投票给你，但我还没有声望。感谢您的帮助。
是的，我现在看到了。当我应该首先查看您的加载语法时，我专注于队列功能！很高兴你明白了。