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>

在Flask应用程序中预处理后将数据传递到d3

1 个答案: