Flask 앱에서 D3의 정적 JSON 데이터 가져 오기

Heroku에서 D3 시각화를 제공하는 데 사용하는 Flask 앱이 있습니다. 시각화 작업은 여기에서 http://wsankey.github.io/dew_mvp/이고 여기 Heroku 앱은 https://dew.herokuapp.com/입니다. 문제는 내 자바 스크립트에서 가져 오지 않는 정적 json 데이터가 있다는 것입니다. 오류가 발생하지 않습니다. 지도 데이터는 'us.json'이고 내 데이터는 'dewmvp1.json'입니다.Flask 앱에서 D3의 정적 JSON 데이터 가져 오기

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)

그리고 관련 상품 : 내가 경로 데이터를 거라고 생각

$(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 파일 : 여기

자바 스크립트 파일 D3의 관련 부분입니다 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에서 사용하는 것이 었습니다. 자바 스크립트 파일은 연결되었지만 실행되지 않았습니다. @ 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

자바 스크립트에서 액세스하려면지도를 다음과 같이 설정해야합니다.

$(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 루트를 시험해야하는지 궁금하네요? 이 경우 자바 스크립트 파일을 다시 작성해야한다고 생각합니다. 로드 순서를 언급 한 또 다른 스레드는 Flask의 javascript에서 문제가 될 수 있지만 몇 가지 변형을 시도했습니다. 다른 생각? 코멘트 주셔서 감사합니다! – wsankey

그래서 'us.json'과 'dewmvpv1.json'이 정적 폴더의 루트 (즉, static/maps/us.json이 아닌'static/us.json')에 있다고 가정합니다. 그렇지 않다면 '/us.json'을 추가하십시오. 파일에 대한 라우트가 지정되어야합니다. 파일에 대한 디렉토리 구조를 나열 할 수 있습니까? –

네, 파일 구조가 아니었지만 훨씬 기본적인 것이 었습니다. 내가 너를 업 그레 이드 할 수 있기를 바라지 만 나는 아직 명성이 없다. 도와 주셔서 감사합니다. – wsankey

Flask 앱에서 D3의 정적 JSON 데이터 가져 오기

답변

관련 문제