Javascriptでの、Promiseの処理と特定ライブラリの使用不可

d3で読み込んだCSVファイルをDanfo.jsデータフレームに変換し、Chartjsで表示させています。
初期処理の際は問題がありませんが、HTML上で

"<select id = "select" onchange = "favTutorial()" > "

の処理を行い、データフレーム内の識別子を選択させてから、チャートを表示しようとすると、

"let query_df = df.query({ "column": "Name", "is": "==", "to": name })"

の部分でエラーが発生します。非同期処理でPromiseのresultを取得できていないのかと思い、あれこれデータフレームの取り出し等を試みましたが、できませんでした。そもそもDanfoで加工したデータを関数から取り出し、他の関数で使用した場合、df.queryの機能が使えないのかどちらの問題かはっきりしないです。
JSを始めてから初心者ですが、何日もハマっており、お助けいただけると幸いです。

HTML
1{% load static %}
2<!DOCTYPE html>
3<html lang="en">
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <meta http-equiv="X-UA-Compatible" content="ie=edge">
8    <!-- CSS only -->
9    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
10    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
11    <title>Real Time Graph app</title>
12</head>
13<body>
14
15    <div class="container">
16        <div class="row">
17            <div class="col-10 mx-auto mt-5">
18                <canvas id="chart"></canvas>
19                <select id = "select" onchange = "favTutorial()" >  
20                </select>  
21
22            </div>
23        </div>
24    </div>
25
26    <!-- <div id="wrapper"> -->
27    <!-- </div> -->
28
29    <script src="https://unpkg.com/chartjs-plugin-colorschemes"></script>
30    <script src="https://cdn.jsdelivr.net/npm/danfojs@0.2.4/lib/bundle.min.js"></script>
31    <script src="https://d3js.org/d3.v5.js"></script>
32    <script src="{% static 'historical_chart.js' %}"></script>
33</body>
34</html>
35

Javascript
1function makedf(data) {
2
3    let cols = ["firstdayinweek", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday","Name"]
4    let df = new dfd.DataFrame(data, { columns: cols })
5    let name = "China Securities 800"
6
7    makeChart(df,name)
8
9    let df_name_list = df['Name'].unique().values
10    let select = document.getElementById("select");  
11    let elmts = df_name_list
12
13    for (let i = 0; i < elmts.length; i++) 
14    {
15    let optn = elmts[i];
16    let el = document.createElement("option");
17    el.textContent = optn;
18    el.value = optn;
19    select.appendChild(el);
20    };
21      return df
22}
23
24function makeChart(df,name) {
25    // df = new dfd.read(df)
26    console.log(df)
27    let query_df = df.query({ "column": "Name", "is": "==", "to": name })
28    let chart = new Chart('chart', {
29    type: "line",
30        options: {
31        plugins: {
32            colorschemes: {
33                scheme: 'brewer.Paired12'
34            }
35        }
36    },
37    data: {
38      labels: query_df['firstdayinweek'].values,
39      datasets: [
40        {
41            label: 'Monday',
42            data: query_df['Monday'].values,
43            // borderColor: "rgba(252,0,0,1)",
44            backgroundColor: "rgba(0,0,0,0)"
45        },
46        {
47            label: 'Tuesday',
48            data: query_df['Tuesday'].values,
49            // borderColor: "rgba(255,0,0,1)",
50            backgroundColor: "rgba(0,0,0,0)"
51        },
52        {
53            label: 'Wednesday',
54            data: query_df['Wednesday'].values,
55            // borderColor: "rgba(255,0,0,1)",
56            backgroundColor: "rgba(0,0,0,0)"
57        },
58        {
59            label: 'Thursday',
60            data: query_df['Thursday'].values,
61            // borderColor: "rgba(255,0,0,1)",
62            backgroundColor: "rgba(0,0,0,0)"
63        },
64        {
65            label: 'Friday',
66            data: query_df['Friday'].values,
67            // borderColor: "rgba(255,0,0,1)",
68            backgroundColor: "rgba(0,0,0,0)"
69        },
70      ]
71    }
72  });
73}
74
75
76var df_result = d3.csv("/static/Analysis_seasonality_of_stock_bond_index_daily_per_dayofweek.csv").then(makedf);
77
78
79function favTutorial() {  
80var select = document.getElementById("myList");  
81name = document.getElementById("select").value;  
82
83console.log(name)
84makeChart(df_result,name)
85}  
86

行動規範の内容に同意します

回答1件

ベストアンサー

以下のように、danfo.DataFrame を上のスコープに置いてみてはどうでしょうか。
（タイミングによってはこれでもコケると思いますが……）

js
1let df;
2
3function makedf(data) {
4
5    let cols = ["firstdayinweek", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday","Name"]
6    df = new dfd.DataFrame(data, { columns: cols })
7
8//...
9
10function favTutorial() {  
11var select = document.getElementById("myList");  
12name = document.getElementById("select").value;  
13
14console.log(name)
15makeChart(df,name)
16}