Question

我有一个Flask应用程序，我用它在Heroku上提供D3可视化。我在这里可视化工作：http://wsankey.github.io/dew_mvp/和Heroku应用程序：https://dew.herokuapp.com/。问题是我的静态json数据没有被我的javascript拾取 - 甚至没有抛出错误。地图数据是'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

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

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

Answer 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)

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

2 个答案: