Получение статических данных JSON в D3 из приложения Flask

У меня есть приложение Flask, которое я использую для визуализации D3 на Heroku. У меня есть визуализация, работающая здесь: http://wsankey.github.io/dew_mvp/ и приложение Heroku здесь: https://dew.herokuapp.com/. Проблема в том, что у меня есть статические json-данные, которые не подхватываются моим javascript - даже не возникает ошибка. Данные карты - «us.json», а мои данные - «dewmvp1.json».Получение статических данных JSON в D3 из приложения Flask

Вот соответствующий кусок 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)

И соответствующие куски index.html, где мой script.js загружается (чтобы дать вам представление о том, как я его загрузке):

<!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">

благодарственных вы!

источник

2015-02-02 wsankey

Что здесь происходило, так это то, что я использую в своем 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>

Это был такой руководитель сосиска для меня, но я, конечно, узнал разницу между тегами. Эти фундаментальные знания необходимы при управлении этими файлами.

источник

2015-02-04 04:08:07 wsankey

В вашем 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)

источник

2015-02-02 20:59:12

Благодарим вас за комментарий, но это тоже не делает трюк. Удручающая часть заключается в том, что она не вызывает ошибку ... ничего не происходит. Мне интересно, нужно ли мне просто попробовать маршрут AJAX? Я думаю, что в этом случае мне придется переделать файлы javascript. Другой поток, упомянутый порядок загрузки, может быть проблемой для javascript в Flask, но я пробовал несколько вариантов. Любые другие мысли? Спасибо за комментарий! – wsankey

, поэтому это предполагает, что 'us.json 'и' dewmvpv1.json' находятся в корневой папке статической папки (т. Е. 'Static/us.json', а не' static/maps/us.json'). если они не являются потом, добавьте '/us.json'. необходимо указать маршрут к файлу. можете ли вы указать структуру каталогов для файлов? –

Да, это была не файловая структура, а нечто гораздо более основное. Жаль, что я не смог бы поддержать вас, но у меня пока нет репутации. Спасибо за помощь. – wsankey

Получение статических данных JSON в D3 из приложения Flask

ответ

Смежные вопросы