Как передать данные из d3 в Flask и обратно в d3? - PullRequest
Новая
       9

Как передать данные из d3 в Flask и обратно в d3?

0 голосов
/ 15 февраля 2020

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

Пользователь будет выбирать опции, переключая несколько кнопок D3 Да / Нет. При каждом нажатии кнопки значение в глобальном массиве обновляется. Мой вопрос заключается в том, как передать этот массив на сервер всякий раз, когда массив обновляется.

MWE ниже, много взято из примеров D3. Я знаю, что app.py не может обработать данные, поступающие от клиента. Мой вопрос заключается в том, как передавать массив каждый раз при нажатии любой кнопки «Да / Нет», запускать функцию для данных и возвращать обработанные данные для визуализации. Похоже, что форма будет передавать данные только при отправке, а не при любых изменениях, а это не та функциональность, которую я хочу.

app.py 

import os 

from flask import Flask, render_template, url_for
from flask_bootstrap import Bootstrap


from bson.json_util import dumps


app = Flask(__name__)
#app.config.from_object(os.environ['APP_SETTINGS'])
Bootstrap(app)


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


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

index. html

{% extends "bootstrap/base.html" %}

{% block head %}
  <meta charset='utf-8'>
    <style>
        body {
            font-family: Consolas, monaco, monospace;
            font-size: 14px; 
            width: 400px;
            margin: 0 auto;
            padding: 20px;
        }
        h1 {
            font-size: 18px; 
            font-weight: normal;
        }
        section {
            margin: 20px 0;
            padding-bottom: 20px;
            border-bottom: 1px dotted #ccc; 
        }
        #q3 button.ny-btn {
            font-size: 72px;
        }
    </style>
    <!-- css for reusable  d3 buttons -->
    <link rel="stylesheet" href="noYesBtns.css">

 {% endblock %}


{% block content %}

    <section id="q1"></section>
    <section id="q2"></section>

    <footer>Feedback: <span id="feedback"></span> </footer>

{% endblock %}


{% block scripts %}

    <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="./static/js/d3_code_toggle_yn.js" charset="utf-8"></script>

    <script>

        var presentation = {};

        var q1 = noYesBtns('#q1')
            .nTxt('tachycardic')
            .yTxt('bradycardic')
            .on('_click', function () {

                presentation['heart_rate'] = ""+this.firstChild.data;
                d3.select('#feedback').text(JSON.stringify(presentation));
            })
            .render();

        var q2 = noYesBtns('#q2')
            .nTxt('miotic')
            .yTxt('mydriatic')
            .on('_click', function () {

                presentation['pupil_size'] = "" + this.firstChild.data;
                d3.select(this).style('background', '#FDBB30');
                d3.select('#feedback').text(JSON.stringify(presentation));
            })
            .render();

    </script>

{% endblock %}

noYesBtns. css

button.ny-btn {
    font-family: Consolas, monaco, monospace;
    font-size: 14px; 
    letter-spacing: 3px;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    color:  #130C0E; /* black */
    background-color: #4CAF50; /* green */
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    display: inline-block;
    margin: 4px;
}
button.ny-btn:focus {
    outline:0;
}
...