Question

Python用户，学习一些基本的javascript：

我创建了一个简单的烧瓶应用程序进行演示。（为进行快速测试，我已将此示例放在Github上：https://github.com/robertdavidwest/flask_d3_example）

dependencies:
- python=3.7.1
- flask=1.0.2
- flask-cors=3.0.7

和https://d3js.org/d3.v5.min.js

APP：

.
├── run.py
├── static
│   └── js
│       └── data.js
└── templates
    └── index.html

我正在从Flask应用程序提供数据：

from flask import Flask, render_template, jsonify
from flask_cors import CORS

app = Flask(__name__)
CORS(app)
@app.route("/get-data")
def get_data():
    return jsonify({"a": 1, "b": 2})

在服务器运行的情况下，如果我导航到http://127.0.0.1:5000/get-data，则可以看到数据。

但是，当我尝试使用d3.json从前端请求数据时，似乎什么都没有发生（我尝试记录数据并写入div）：

d3.json("http://127.0.0.1:5000/get-data",
  function(d){
     console.log(d);
     document.getElementById("d3-write-here").innerHTML = d;
 })

任何指导将不胜感激。

简单应用中所有代码的详细信息：

index.html：

 <!DOCTYPE html>
 <html lang='en'>
 <head>
   <meta charset="utf-8" />
   <title>Simple Example</title>
 </head>
 <body>
  <h2>Nothing much here</h2>
  <div id="d3-write-here"></div>

 <script src="https://d3js.org/d3.v5.min.js"></script>
 <script src="{{ url_for('static', filename='js/data.js') }}">
 </script>

run.py：

from flask import Flask, render_template, jsonify
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.route("/")
def index():
    return render_template("index.html")

@app.route("/get-data")
def get_data():
    return jsonify({"a": 1, "b": 2})

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

static / js / data.js：

d3.json("http://127.0.0.1:5000/get-data",
  function(d){
    console.log(d);
    document.getElementById("d3-write-here").innerHTML = d;
  })

Answer 1

在d3 v5中，您需要对json调用使用其他语法。

尝试：

d3.json("http://127.0.0.1:5000/get-data").then(
  function(d){
    console.log(d);
    document.getElementById("d3-write-here").innerHTML = d;
  })

从python flask后端从前端（d3.json）请求数据

1 个答案: