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

Question

我有一个 Flask 应用程序，用于在 Heroku 上提供 D3 可视化服务。我有可视化在这里工作：http://wsankey.github.io/dew_mvp/ and the Heroku app here: 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">

谢谢！

Answer 1

在您的 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)

Answer 2

这里发生的事情是我在 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>

这对我来说实在是太让人头疼了，但我确实了解了标签之间的区别。管理这些文件时需要这些基础知识。

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

Obtaining static JSON data in D3 from Flask app

python

json

heroku

flask

d3.js