在Flask應用中進行預處理后將數據傳遞到d3

Question

我有一個簡單的Flask應用程序，該應用程序用於基於html表單的輸入來查詢數據庫，然后將數據清理並將其轉換為json對象，以饋送到d3可視化中。 我在弄清楚如何將json對象輸入到d3代碼時遇到了麻煩。

這是基本的Flask應用程序：

導入有關代碼vertica_query，parse_to_json和clean_dataframe的注意事項都是我編寫的用於處理數據的函數。 clean_dataframe函數是清理數據並准備轉換為json所必需的，但它也使數據能夠在d3可視化下以html表的形式顯示，這就是為什么我不只是擁有一個更大的函數來進行查詢，清理，並轉換為json。

import os
import json
from flask import (Flask, Response, request, 
                   render_template, redirect, 
                   url_for, make_response,
                   jsonify)

from query_clean import vertica_query, parse_to_json, clean_dataframe

app = Flask(__name__)

@app.route("/", methods=['POST', 'GET'])
def index():
    return render_template('index.html')


@app.route("/build-chart", methods=['POST', 'GET'])
def build_chart():
    id = request.form['id']
    table = clean_dataframe(vertica_query(id))
    chart_json = parse_to_json(table)

    return render_template('render.html', data=table, chart_json=chart_json)

if __name__ == "__main__":
    port = int(os.environ.get("PORT", 5000))
    app.run(debug=True, host='0.0.0.0', port=port)

到目前為止我嘗試過的

將chart_json傳遞到我的build_chart視圖中，如下所示：

<script> var chartData = {{ chart_json | tojson | safe }}; </script>

然后嘗試像這樣讀入d3，但沒有正確讀入d3，我從d3.min.js和chart.js（構建圖表的d3）中拋出錯誤

d3.json(chartData, function(error, graph) {

    var nodeMap = {};
    graph.nodes.forEach(function(x) { nodeMap[x.name] = x; });
    graph.links = graph.links.map(function(x) {
      return {
        source: nodeMap[x.source],
        target: nodeMap[x.target],
        value: x.value,
        color: x.color
      };
    });

我還嘗試創建一個返回json對象的視圖，然后直接將視圖鏈接到d3.json（“”）somethign，如下所示：

@app.route("/stream", methods=['POST', 'GET'])
def stream():
    id = request.form['id']
    table = clean_dataframe(vertica_query(id))
    chart_json = parse_to_json(table)

    return jsonify(chart_json) 

d3.json("http://localhost:5000/stream", function(error, graph) {

    var nodeMap = {};
    graph.nodes.forEach(function(x) { nodeMap[x.name] = x; });
    graph.links = graph.links.map(function(x) {
      return {
        source: nodeMap[x.source],
        target: nodeMap[x.target],
        value: x.value,
        color: x.color
      };
    });

可以，但是出現問題是因為我不知道如何在此視圖中獲取ID，因為html表單中的action =參數設置為build_chart視圖

<form action="/build_chart" method="POST"></form>

另外，我將查詢數據庫兩次，這是不理想的。

理想情況下，我將能夠查詢數據庫一次創建我的表和chart_json變量，然后將它們傳遞給需要數據的視圖。 有什么辦法可以用Flask做到這一點？

Answer 1

d3.json實際上會觸發ajax請求，因此，如果您的圖表中的數據實際上是按您顯示的模板呈現的，那么您就不需要它了。 如果您想這樣做（我建議您像在第二個示例中一樣實際建議進行API調用...），只需在圖表函數中使用保存數據的變量即可：

<script>
  var chartData = {{ chart_json | tojson | safe }}; 
  makeSomeChart(chartData)
</script>