Обновление визуализации гистограммы d3 js после отправки данных через форму - PullRequest
Новая
       5

Обновление визуализации гистограммы d3 js после отправки данных через форму

0 голосов
/ 26 марта 2020

Я создаю веб-приложение на одну страницу flask, цель которого - отобразить гистограмму общего числа случаев заболевания и смерти 19 в каждой стране.

Одна страница состоит из заголовка, формы, содержащей два поля даты (дата начала и дата окончания), кнопку отправки и гистограмму. Когда пользователь нажимает кнопку, он отправляет даты с помощью метода POST в функцию представления 'index', определенную ниже: 

from flask import render_template, redirect
from app import app
from app.forms import DateForm
from .data_processing.dataset_preparation import process_data


@app.route('/', methods=["GET", "POST"])
def index():
    form = DateForm()
    if form.validate_on_submit():
        process_data(form.startDate.data, form.endDate.data)
        return redirect('/')

    return render_template('base.html', title='Home', form=form)

Функция process_data работает нормально, потому что я вижу, что файл .csv был обработан однако моя гистограмма не меняется вообще. Я использую d3 js для рендеринга гистограммы и включил код в свой шаблон html следующим образом:

<script type="text/javascript" src="{{url_for('static', filename='script.js')}}"></script>

где 'script. js' это файл, содержащий код d3 js, который выглядит следующим образом: 

const render =(data) => {
#some code to render the data as a bar chart
  };


d3.csv("/static/data/processed/processed_covid19.csv").then(function(data) {
    render(data);
    });

Когда я обновляю sh страницу после нажатия кнопки отправки, я вижу, что гистограмма обновляется соответствующим образом. Однако только нажатие на кнопку «Отправить» обновляет страницу sh без изменения гистограммы. Мне интересно почему?

Когда я нажимаю кнопку отправки, метод перенаправления в функции представления 'index' вызывает ту же функцию представления с использованием метода GET после обработки данных, поэтому он отображает шаблон html для одной страницы, который затем должен запустите сценарий. js и выполните эту строку кода

d3.csv("/static/data/processed/processed_covid19.csv").then(function(data) { render(data); });

, которая, на мой взгляд, должна прочитать данные (которые были обновлены) и, следовательно, снова отобразить диаграмму используя эти новые данные?

Я пытался использовать d3.select ("svg"). remove () перед повторным рендерингом моей диаграммы, а также поместил весь свой код в $ (document) .ready (function () { }) но безрезультатно.

Спасибо за помощь (-:!

...