teratail
回答率
85.37%
teratail 10th-anniversary
teratail 10th-anniversary
質問するログイン新規登録
トップに関する質問JavaScriptのエラーについて

編集履歴

質問編集履歴

20

さらに読みやすいように短縮した

2020/04/25 00:54

投稿

takahashi-one
takahashi-one

スコア120

test CHANGED
@@ -1 +1 @@
1
- JavaScript(D3js)のエラーについて
1
+ JavaScriptのエラーについて
test CHANGED
@@ -1,10 +1,6 @@
1
1
  ### 前提・実現したいこと
2
2
 
3
- エラーの原因が知りたい。
3
+ コードの作り手側の意図が知りたい。
4
-
5
-
6
-
7
-
8
4
 
9
5
 
10
6
 
@@ -18,110 +14,6 @@
18
14
 
19
15
  ```
20
16
 
21
- 使用しているライブラリのD3jsのソースコードをダウンロードして中身を見ました。throwしているコードを抽出しました。それが下記です。
17
+ 普通は何かをthrowする場合、デバックするためにErrorオブジェクトを作成してエラーメッセージを返すと思います。しかしエラーメッセージはなく配列のみを返してるわけです。もしみなさんがアプリの開発者だとしたら、エラーメッセージを付けずに値のみを返すような場面が過去にあったでしょうか？　あったとしたらそれはどのような意図でそのようなことをしたのでしょうか？
22
18
 
23
- throwしているのはメッセージ付きのErrorか、単にnew Errorとしているものだけです。配列をreturnしてそうな所がありません。と言うことはこのcatchは何なのでしょうか？
19
+ もちろん自分ではthrowはしていませんし、ライブラリはD3jsを使用しているのですが、D3jsのソースコードをダウンロードしてthrow部分を見たのですが値のみをthrowしている場所がありません。となるとJavaScript本体ということになるのですが。
24
-
25
- ```javascript
26
-
27
- if (!(t = arguments[i] + "") || (t in _) || /[\s.]/.test(t)) throw new Error("illegal type: " + t);
28
-
29
- if (t && !types.hasOwnProperty(t)) throw new Error("unknown type: " + t);
30
-
31
- if (callback != null && typeof callback !== "function") throw new Error("invalid callback: " + callback);
32
-
33
- if (!this._.hasOwnProperty(type)) throw new Error("unknown type: " + type);
34
-
35
- if (!this._.hasOwnProperty(type)) throw new Error("unknown type: " + type);
36
-
37
- if (typeof callback !== "function") throw new TypeError("callback is not a function");
38
-
39
- if (schedule.state > CREATED) throw new Error("too late; already scheduled");
40
-
41
- if (schedule.state > STARTED) throw new Error("too late; already running");
42
-
43
- if (!schedule || !(schedule = schedule[id])) throw new Error("transition not found");
44
-
45
- if (typeof value !== "function") throw new Error;
46
-
47
- if (typeof value !== "function") throw new Error;
48
-
49
- if (typeof value !== "function") throw new Error;
50
-
51
- if (transition._id !== this._id) throw new Error;
52
-
53
- if (typeof value !== "function") throw new Error;
54
-
55
- if (typeof value !== "function") throw new Error;
56
-
57
- if (r < 0) throw new Error("negative radius: " + r);
58
-
59
- if (r < 0) throw new Error("negative radius: " + r);
60
-
61
- if (!(_0 > 0) || !(_1 > 0)) throw new Error("invalid size");
62
-
63
- if (!(_0 >= 0) && !(_0 >= 0)) throw new Error("invalid size");
64
-
65
- if (!((_ = +_) >= 1)) throw new Error("invalid cell size");
66
-
67
- if (!((_ = +_) >= 0)) throw new Error("invalid bandwidth");
68
-
69
- if (!response.ok) throw new Error(response.status + " " + response.statusText);
70
-
71
- if (!response.ok) throw new Error(response.status + " " + response.statusText);
72
-
73
- if (!response.ok) throw new Error(response.status + " " + response.statusText);
74
-
75
- if (!response.ok) throw new Error(response.status + " " + response.statusText);
76
-
77
- if (!node) throw new Error("missing: " + nodeId);
78
-
79
- if (!(match = re.exec(specifier))) throw new Error("invalid format: " + specifier);
80
-
81
- throw new Error;
82
-
83
- if (typeof f !== "function") throw new Error;
84
-
85
- if (root) throw new Error("multiple roots");
86
-
87
- if (!parent) throw new Error("missing: " + nodeId);
88
-
89
- if (parent === ambiguous) throw new Error("ambiguous: " + nodeId);
90
-
91
- if (!root) throw new Error("no root");
92
-
93
- if (n > 0) throw new Error("cycle");
94
-
95
- ```
96
-
97
- エラーがでているコードは下記です。
98
-
99
- ```javascript
100
-
101
- function plot(){
102
-
103
- path.data(d1)
104
-
105
- .transition()
106
-
107
- .delay(1000)
108
-
109
- .duration(1500)
110
-
111
- .attr("d", area)
112
-
113
- .end()
114
-
115
- .then(() => {
116
-
117
- plot();
118
-
119
- }).catch((e) => {
120
-
121
- console.log(e);
122
-
123
- })
124
-
125
- }
126
-
127
- ```

19

コードを追加しました

2020/04/25 00:54

投稿

takahashi-one
takahashi-one

スコア120

test CHANGED
File without changes
test CHANGED
@@ -93,3 +93,35 @@
93
93
  if (n > 0) throw new Error("cycle");
94
94
 
95
95
  ```
96
+
97
+ エラーがでているコードは下記です。
98
+
99
+ ```javascript
100
+
101
+ function plot(){
102
+
103
+ path.data(d1)
104
+
105
+ .transition()
106
+
107
+ .delay(1000)
108
+
109
+ .duration(1500)
110
+
111
+ .attr("d", area)
112
+
113
+ .end()
114
+
115
+ .then(() => {
116
+
117
+ plot();
118
+
119
+ }).catch((e) => {
120
+
121
+ console.log(e);
122
+
123
+ })
124
+
125
+ }
126
+
127
+ ```

18

質問を要約した

2020/04/23 01:01

投稿

takahashi-one
takahashi-one

スコア120

test CHANGED
@@ -1 +1 @@
1
- JavaScript(D3js)のPromisのエラーについて
1
+ JavaScript(D3js)のエラーについて
test CHANGED
@@ -1,6 +1,6 @@
1
1
  ### 前提・実現したいこと
2
2
 
3
- Promisのエラーの原因を知りたい
3
+ エラーの原因が知りたい。
4
4
 
5
5
 
6
6
 
@@ -10,136 +10,86 @@
10
10
 
11
11
  ### 発生している問題・エラーメッセージ
12
12
 
13
- エラーをcatchするとe.nameもe.messageもundefined と表示されました。
14
-
15
- console.log(e);　このようにして e 自体を見てみると
16
-
17
-
18
-
19
- 下記のように配列がズラーっと表示されました。e.nameやe.messageがundefinedなのは、eの中に配列が入ってるだけだからと思うのですが、エラーメッセージがないPromiseのエラーって何があるのでしょうか。
20
-
21
-
13
+ javascriptでanimationのコードを試していました。animationなので非同期のコードです。自分ではthrowなどのエラー処理は何もしていません。コードを実行していたらconsoleに赤字のエラーがでました。対象のコードをtry-catchで囲って、e.nameとe.messageでエラーの原因を見たのですがundefinedでした。console.log(e)でe自体を見ると下記のような配列の羅列でした。
22
14
 
23
15
  ```javascript
24
16
 
25
- Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), ～
17
+ (200) [Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), …]
26
18
 
27
19
  ```
28
20
 
29
- ### 該当のソースコード
21
+ 使用しているライブラリのD3jsのソースコードをダウンロードして中身を見ました。throwしているコードを抽出しました。それが下記です。
22
+
23
+ throwしているのはメッセージ付きのErrorか、単にnew Errorとしているものだけです。配列をreturnしてそうな所がありません。と言うことはこのcatchは何なのでしょうか？
30
24
 
31
25
  ```javascript
32
26
 
27
+ if (!(t = arguments[i] + "") || (t in _) || /[\s.]/.test(t)) throw new Error("illegal type: " + t);
33
28
 
29
+ if (t && !types.hasOwnProperty(t)) throw new Error("unknown type: " + t);
34
30
 
35
- let path = svg.selectAll("path") ----------20個のpathを作成
31
+ if (callback != null && typeof callback !== "function") throw new Error("invalid callback: " + callback);
36
32
 
37
- .data(d1)
33
+ if (!this._.hasOwnProperty(type)) throw new Error("unknown type: " + type);
38
34
 
39
- .join("path")
35
+ if (!this._.hasOwnProperty(type)) throw new Error("unknown type: " + type);
40
36
 
41
- .attr("d", area)
37
+ if (typeof callback !== "function") throw new TypeError("callback is not a function");
42
38
 
43
- .attr("fill", () => z(Math.random()));
39
+ if (schedule.state > CREATED) throw new Error("too late; already scheduled");
44
40
 
41
+ if (schedule.state > STARTED) throw new Error("too late; already running");
45
42
 
43
+ if (!schedule || !(schedule = schedule[id])) throw new Error("transition not found");
46
44
 
47
- function plot(){
45
+ if (typeof value !== "function") throw new Error;
48
46
 
49
- path.data(d1)
47
+ if (typeof value !== "function") throw new Error;
50
48
 
51
- .transition()
49
+ if (typeof value !== "function") throw new Error;
52
50
 
53
- .delay(1000)
51
+ if (transition._id !== this._id) throw new Error;
54
52
 
55
- .duration(1500)
53
+ if (typeof value !== "function") throw new Error;
56
54
 
57
- .attr("d", area)
55
+ if (typeof value !== "function") throw new Error;
58
56
 
59
- .end() ← ここでエラーを発生している模様です。
57
+ if (r < 0) throw new Error("negative radius: " + r);
60
58
 
61
- .then(() => {
59
+ if (r < 0) throw new Error("negative radius: " + r);
62
60
 
63
- plot();
61
+ if (!(_0 > 0) || !(_1 > 0)) throw new Error("invalid size");
64
62
 
65
- });
63
+ if (!(_0 >= 0) && !(_0 >= 0)) throw new Error("invalid size");
66
64
 
65
+ if (!((_ = +_) >= 1)) throw new Error("invalid cell size");
66
+
67
+ if (!((_ = +_) >= 0)) throw new Error("invalid bandwidth");
68
+
69
+ if (!response.ok) throw new Error(response.status + " " + response.statusText);
70
+
71
+ if (!response.ok) throw new Error(response.status + " " + response.statusText);
72
+
73
+ if (!response.ok) throw new Error(response.status + " " + response.statusText);
74
+
75
+ if (!response.ok) throw new Error(response.status + " " + response.statusText);
76
+
77
+ if (!node) throw new Error("missing: " + nodeId);
78
+
79
+ if (!(match = re.exec(specifier))) throw new Error("invalid format: " + specifier);
80
+
67
- })
81
+ throw new Error;
82
+
83
+ if (typeof f !== "function") throw new Error;
84
+
85
+ if (root) throw new Error("multiple roots");
86
+
87
+ if (!parent) throw new Error("missing: " + nodeId);
88
+
89
+ if (parent === ambiguous) throw new Error("ambiguous: " + nodeId);
90
+
91
+ if (!root) throw new Error("no root");
92
+
93
+ if (n > 0) throw new Error("cycle");
68
94
 
69
95
  ```
70
-
71
-
72
-
73
- サイトを表示するとすぐにplot()が呼ばれ、アニメーションがスタートするようになっていて、ここではエラーはでません。
74
-
75
-
76
-
77
- ドロップダウンリストでアニメーションの種類を変更しています。アニメーションの途中でドロップダウンリストで種類を変更すると、ループの最初の1回目だけエラーが表示されます。２回目以降のループからはエラー表示はでません。
78
-
79
-
80
-
81
- ドロップダウンリストを変更した時に呼ばれるのが下記です。
82
-
83
- ```javascript
84
-
85
- function change(pattern){
86
-
87
- path.interrupt(); -------- 動いているpathのアニメーションをキャンセル
88
-
89
-
90
-
91
- if(pattern==0)chagevalue=p0; ----------ここから5行でアニメーションの種類を変更
92
-
93
- else if(pattern==1)chagevalue=p1;
94
-
95
- else if(pattern==2)chagevalue=p2;
96
-
97
- else if(pattern==3)chagevalue=p3;
98
-
99
- stack.offset(chagevalue);
100
-
101
-
102
-
103
- path = svg.selectAll("path") --------------pathを再構築
104
-
105
- .data(d1)
106
-
107
- .join("path")
108
-
109
- .attr("d", area)
110
-
111
- .attr("fill", () => z(Math.random()));
112
-
113
-
114
-
115
- plot(); -----------------------plotを呼んでアニメーションを開始
116
-
117
- }
118
-
119
- ```
120
-
121
- なぜend()をつけるとエラーとなるか解りません。
122
-
123
-
124
-
125
- エラーが表示されるのですがプログラム自体はちゃんと動いています。
126
-
127
-
128
-
129
- ### 試したこと
130
-
131
- e.name や e.message で何か具体的なエラー情報が表示されればいいのですがundefinedなので何をやったらいいのか解りません。
132
-
133
- プログラムのどこかでthrowなどのエラー処理などは何もしていません。
134
-
135
-
136
-
137
- 最初に質問した時とだいぶ違いますが、いろいろ試してエラーの原因の場所が.end() だというところまで解りました。
138
-
139
- 後は原因なのですが、現在はまったく解りません。
140
-
141
-
142
-
143
- ### 補足情報（FW/ツールのバージョンなど）
144
-
145
- ライブラリはD3jsです。

17

コードを追加しました

2020/04/23 00:50

投稿

takahashi-one
takahashi-one

スコア120

test CHANGED
File without changes
test CHANGED
@@ -68,11 +68,15 @@
68
68
 
69
69
  ```
70
70
 
71
+
72
+
71
- plot()はブラウザで最初に表示した時に呼ばれます。ここではエラーはでません。
73
+ サイトを表示するとすぐにplot()が呼ばれ、アニメーションがスタートするようになっていて、ここではエラーはでません。
72
74
 
73
75
 
74
76
 
75
- ドロップダウンリストでアニメーションをの種類を変更しているのですが、この時にも呼ばれます。この時に、最初の1回だけエラーが表示されます。２回目以降のループからはエラー表示はでません。
77
+ ドロップダウンリストでアニメーションの種類を変更しています。アニメーションの途中でドロップダウンリストで種類を変更すると、ループの最初の1回目だけエラーが表示されます。２回目以降のループからはエラー表示はでません。
78
+
79
+
76
80
 
77
81
  ドロップダウンリストを変更した時に呼ばれるのが下記です。
78
82
 

16

ちょっと解ったことを記入

2020/04/22 16:22

投稿

takahashi-one
takahashi-one

スコア120

test CHANGED
File without changes
test CHANGED
@@ -30,9 +30,23 @@
30
30
 
31
31
  ```javascript
32
32
 
33
+
34
+
35
+ let path = svg.selectAll("path") ----------20個のpathを作成
36
+
37
+ .data(d1)
38
+
39
+ .join("path")
40
+
41
+ .attr("d", area)
42
+
43
+ .attr("fill", () => z(Math.random()));
44
+
45
+
46
+
33
47
  function plot(){
34
48
 
35
- path.data(random())
49
+ path.data(d1)
36
50
 
37
51
  .transition()
38
52
 
@@ -84,7 +98,7 @@
84
98
 
85
99
  path = svg.selectAll("path") --------------pathを再構築
86
100
 
87
- .data(randomize)
101
+ .data(d1)
88
102
 
89
103
  .join("path")
90
104
 

15

コードを追加しました

2020/04/22 16:12

投稿

takahashi-one
takahashi-one

スコア120

test CHANGED
File without changes
test CHANGED
@@ -58,9 +58,47 @@
58
58
 
59
59
 
60
60
 
61
- あと、ドロップダウンリストでアニメーションをの種類を変更しているのですが、この時にも呼ばれます。この時に、最初の1回だけエラーが表示されます。２回目以降はエラー表示はでません。
61
+ ドロップダウンリストでアニメーションをの種類を変更しているのですが、この時にも呼ばれます。この時に、最初の1回だけエラーが表示されます。２回目以降のループからはエラー表示はでません。
62
+
63
+ ドロップダウンリストを変更した時に呼ばれるのが下記です。
64
+
65
+ ```javascript
66
+
67
+ function change(pattern){
68
+
69
+ path.interrupt(); -------- 動いているpathのアニメーションをキャンセル
62
70
 
63
71
 
72
+
73
+ if(pattern==0)chagevalue=p0; ----------ここから5行でアニメーションの種類を変更
74
+
75
+ else if(pattern==1)chagevalue=p1;
76
+
77
+ else if(pattern==2)chagevalue=p2;
78
+
79
+ else if(pattern==3)chagevalue=p3;
80
+
81
+ stack.offset(chagevalue);
82
+
83
+
84
+
85
+ path = svg.selectAll("path") --------------pathを再構築
86
+
87
+ .data(randomize)
88
+
89
+ .join("path")
90
+
91
+ .attr("d", area)
92
+
93
+ .attr("fill", () => z(Math.random()));
94
+
95
+
96
+
97
+ plot(); -----------------------plotを呼んでアニメーションを開始
98
+
99
+ }
100
+
101
+ ```
64
102
 
65
103
  なぜend()をつけるとエラーとなるか解りません。
66
104
 

14

冗長だったので簡潔にした

2020/04/22 16:06

投稿

takahashi-one
takahashi-one

スコア120

test CHANGED
File without changes
test CHANGED
@@ -17,6 +17,8 @@
17
17
 
18
18
 
19
19
  下記のように配列がズラーっと表示されました。e.nameやe.messageがundefinedなのは、eの中に配列が入ってるだけだからと思うのですが、エラーメッセージがないPromiseのエラーって何があるのでしょうか。
20
+
21
+
20
22
 
21
23
  ```javascript
22
24
 
@@ -52,7 +54,21 @@
52
54
 
53
55
  ```
54
56
 
57
+ plot()はブラウザで最初に表示した時に呼ばれます。ここではエラーはでません。
58
+
59
+
60
+
61
+ あと、ドロップダウンリストでアニメーションをの種類を変更しているのですが、この時にも呼ばれます。この時に、最初の1回だけエラーが表示されます。２回目以降はエラー表示はでません。
62
+
63
+
64
+
55
- なぜend()をつけるとエラーとなるか解りません。Promiseのエラーだと思うのですがこれで何か解りますか？
65
+ なぜend()をつけるとエラーとなるか解りません。
66
+
67
+
68
+
69
+ エラーが表示されるのですがプログラム自体はちゃんと動いています。
70
+
71
+
56
72
 
57
73
  ### 試したこと
58
74
 

13

誤字を訂正する

2020/04/22 15:44

投稿

takahashi-one
takahashi-one

スコア120

test CHANGED
File without changes
test CHANGED
@@ -52,7 +52,7 @@
52
52
 
53
53
  ```
54
54
 
55
- なぜend()をつけるとエラーとなるか解りません。Promiseのエラーだと思うですがこれで何か解りますか？
55
+ なぜend()をつけるとエラーとなるか解りません。Promiseのエラーだと思うのですがこれで何か解りますか？
56
56
 
57
57
  ### 試したこと
58
58
 

12

誤字を直しました

2020/04/22 15:37

投稿

takahashi-one
takahashi-one

スコア120

test CHANGED
File without changes
test CHANGED
@@ -71,5 +71,3 @@
71
71
  ### 補足情報（FW/ツールのバージョンなど）
72
72
 
73
73
  ライブラリはD3jsです。
74
-
75
- ここにより詳細な情報を記載してください。

11

誤字を修正した

2020/04/22 15:36

投稿

takahashi-one
takahashi-one

スコア120

test CHANGED
File without changes
test CHANGED
@@ -30,7 +30,7 @@
30
30
 
31
31
  function plot(){
32
32
 
33
- path.data(randomize())
33
+ path.data(random())
34
34
 
35
35
  .transition()
36
36
 

10

質問が冗長なので簡潔にした

2020/04/22 15:34

投稿

takahashi-one
takahashi-one

スコア120

test CHANGED
@@ -1 +1 @@
1
- JavaScript(D3js)のasync awaitのエラーについて
1
+ JavaScript(D3js)のPromisのエラーについて
test CHANGED
@@ -1,16 +1,8 @@
1
1
  ### 前提・実現したいこと
2
2
 
3
- animationをsvgで表示するコードを試していました。
3
+ Promisのエラーの原因を知りたい
4
4
 
5
- animationはドロップダウンリストでanimationの動きの種類を選択できるようにしています。
6
5
 
7
- ブラウザを最初に開いた時には何もエラーは出ずにアニメーションが始まります。
8
-
9
- ドロップダウンリストで種類を変更した時に1回だけエラーとなり、その後は正常にアニメーションしています。
10
-
11
- 1回だけエラーとなるのですが、その時のアニメーションは何もおかしくなく普通に動いています。
12
-
13
- この1回のエラーの原因が知りたいです。
14
6
 
15
7
 
16
8
 
@@ -18,45 +10,13 @@
18
10
 
19
11
  ### 発生している問題・エラーメッセージ
20
12
 
21
- 下記のようにしてみたところe.nameもe.messageもundefined と表示されました。
13
+ エラーをcatchするとe.nameもe.messageもundefined と表示されました。
22
14
 
23
- ```javascript
24
-
25
- try{
26
-
27
- //code....
28
-
29
- }catch(e){
30
-
31
- console.log(e.name);
32
-
33
- console.log(e.message);
15
+ console.log(e);　このようにして e 自体を見てみると
34
-
35
- }
36
-
37
- ```
38
16
 
39
17
 
40
18
 
41
- なので今度は下記のようみしてみたところ
42
-
43
- ```javascript
44
-
45
- try{
46
-
47
- //code....
48
-
49
- }catch(e){
50
-
51
- console.log(e);
52
-
53
- }
54
-
55
- ```
56
-
57
- 下記のように配列がズラーっと表示されました。これはアニメーションをさせる時に使うデータです。ドロップダウンリストで変更した時にデータを変更します。
58
-
59
- e.nameやe.messageがundefinedなのは、eの中に配列が入ってるだけだからと思うのですが、エラーメッセージがないPromiseのエラーって何があるのでしょうか。
19
+ 下記のように配列がズラーっと表示されました。e.nameやe.messageがundefinedなのは、eの中に配列が入ってるだけだからと思うのですが、エラーメッセージがないPromiseのエラーって何があるのでしょうか。
60
20
 
61
21
  ```javascript
62
22
 
@@ -65,96 +25,6 @@
65
25
  ```
66
26
 
67
27
  ### 該当のソースコード
68
-
69
- 下記はchange(pattern)を呼んでいるコードです。change自体は呼ばれているので下記は問題ないと思います
70
-
71
- ```javascript
72
-
73
- .on("change",function(d){
74
-
75
- change(d3.select("#selectid").node().value);
76
-
77
- })
78
-
79
- ```
80
-
81
- ドロップダウンリストを選択した時に1回だけanimationの種類を変えるために下記を呼んで、その中からplot()を呼びます。
82
-
83
- ```javascript
84
-
85
- function change(pattern){
86
-
87
- path.interrupt() ;
88
-
89
- if(pattern==0)chagevalue=p0;
90
-
91
- else if(pattern==1)chagevalue=p1;
92
-
93
- else if(pattern==2)chagevalue=p2;
94
-
95
- else if(pattern==3)chagevalue=p3;
96
-
97
- stack.offset(chagevalue);
98
-
99
- path = svg.selectAll("path")
100
-
101
- .data(random())
102
-
103
- .join("path")
104
-
105
- .attr("d", area)
106
-
107
- .attr("fill", () => z(Math.random()));
108
-
109
- plot();
110
-
111
- }
112
-
113
- ```
114
-
115
- 下記plotは最初にブラウザを表示した時に直接呼ばれます。
116
-
117
- あとドロップダウンリストで値を変更した時に上記changeから呼ばれます
118
-
119
- ```javascript
120
-
121
- async function plot(){
122
-
123
- try{
124
-
125
- while(true){
126
-
127
- await path
128
-
129
- .data(random()) ← random()はランダムなデータを作成します
130
-
131
- .transition()
132
-
133
- .delay(1000)
134
-
135
- .duration(1500)
136
-
137
- .attr("d", area)
138
-
139
- .end(); ← ここを削除するとエラーは起きないが、awaitが効かなくなる
140
-
141
- }
142
-
143
- }catch(e){
144
-
145
- console.log(e)
146
-
147
- }
148
-
149
- }
150
-
151
- ```
152
-
153
- 一旦whileをはずして試したところ.end 部分をなくすとエラーとならないことが解りました。しかし、whileをつけて実行するとawaitが効かずpathのdelayとdurationを待たずにwhileのループが実行されてしまうためブラウザがフリーズします。.end を削除してawaitが効く方法を探しています。
154
-
155
-
156
-
157
- async await ではない方法を考えました。それが下記なのですが、end()を利用しているため同じエラーがでました。
158
28
 
159
29
  ```javascript
160
30
 
@@ -170,7 +40,7 @@
170
40
 
171
41
  .attr("d", area)
172
42
 
173
- .end()
43
+ .end() ← ここでエラーを発生している模様です。
174
44
 
175
45
  .then(() => {
176
46
 
@@ -178,7 +48,7 @@
178
48
 
179
49
  });
180
50
 
181
- }
51
+ })
182
52
 
183
53
  ```
184
54
 
@@ -186,11 +56,15 @@
186
56
 
187
57
  ### 試したこと
188
58
 
189
-
190
-
191
59
  e.name や e.message で何か具体的なエラー情報が表示されればいいのですがundefinedなので何をやったらいいのか解りません。
192
60
 
193
61
  プログラムのどこかでthrowなどのエラー処理などは何もしていません。
62
+
63
+
64
+
65
+ 最初に質問した時とだいぶ違いますが、いろいろ試してエラーの原因の場所が.end() だというところまで解りました。
66
+
67
+ 後は原因なのですが、現在はまったく解りません。
194
68
 
195
69
 
196
70
 

9

調べたことを追記した

2020/04/22 15:32

投稿

takahashi-one
takahashi-one

スコア120

test CHANGED
File without changes
test CHANGED
@@ -152,9 +152,9 @@
152
152
 
153
153
  一旦whileをはずして試したところ.end 部分をなくすとエラーとならないことが解りました。しかし、whileをつけて実行するとawaitが効かずpathのdelayとdurationを待たずにwhileのループが実行されてしまうためブラウザがフリーズします。.end を削除してawaitが効く方法を探しています。
154
154
 
155
+
156
+
155
- async await ではない方法を考えました。それが下記なのですが、うまくいきません。path なのですが svg.selectAll("path") となっているとおり 1個のpath ではありません。全部で20個くらいのpath になります。なので1 回呼べばいいplot()が20回呼ばれてしまいます。
157
+ async await ではない方法を考えました。それが下記なのですが、end()を利用しているため同じエラーがでました。
156
-
157
- 何かいい解決策はあるでしょうか？ ちなみにplot内にif文をつけてcount変数を用意してインクリメントして20回目になったらifに入って実行するみたいにしようと思ったのですが何かカッコ悪い対応だなと思いました。何かいい方法はないでしょうか？
158
158
 
159
159
  ```javascript
160
160
 
@@ -170,11 +170,19 @@
170
170
 
171
171
  .attr("d", area)
172
172
 
173
+ .end()
174
+
173
- .on("end",plot)
175
+ .then(() => {
176
+
174
-
177
+ plot();
178
+
179
+ });
180
+
175
- }
181
+ }
176
-
182
+
177
- ```
183
+ ```
184
+
185
+ なぜend()をつけるとエラーとなるか解りません。Promiseのエラーだと思うですがこれで何か解りますか？
178
186
 
179
187
  ### 試したこと
180
188
 

8

違う対応を考えました

2020/04/22 15:18

投稿

takahashi-one
takahashi-one

スコア120

test CHANGED
@@ -1 +1 @@
1
- JavaScriptのasync awaitのエラーについて
1
+ JavaScript(D3js)のasync awaitのエラーについて
test CHANGED
@@ -152,7 +152,29 @@
152
152
 
153
153
  一旦whileをはずして試したところ.end 部分をなくすとエラーとならないことが解りました。しかし、whileをつけて実行するとawaitが効かずpathのdelayとdurationを待たずにwhileのループが実行されてしまうためブラウザがフリーズします。.end を削除してawaitが効く方法を探しています。
154
154
 
155
+ async await ではない方法を考えました。それが下記なのですが、うまくいきません。path なのですが svg.selectAll("path") となっているとおり 1個のpath ではありません。全部で20個くらいのpath になります。なので1 回呼べばいいplot()が20回呼ばれてしまいます。
155
156
 
157
+ 何かいい解決策はあるでしょうか？ ちなみにplot内にif文をつけてcount変数を用意してインクリメントして20回目になったらifに入って実行するみたいにしようと思ったのですが何かカッコ悪い対応だなと思いました。何かいい方法はないでしょうか？
158
+
159
+ ```javascript
160
+
161
+ function plot(){
162
+
163
+ path.data(randomize())
164
+
165
+ .transition()
166
+
167
+ .delay(1000)
168
+
169
+ .duration(1500)
170
+
171
+ .attr("d", area)
172
+
173
+ .on("end",plot)
174
+
175
+ }
176
+
177
+ ```
156
178
 
157
179
  ### 試したこと
158
180
 

7

誤字を訂正する

2020/04/22 14:56

投稿

takahashi-one
takahashi-one

スコア120

test CHANGED
File without changes
test CHANGED
@@ -150,9 +150,7 @@
150
150
 
151
151
  ```
152
152
 
153
- 一旦whileをはずして試したところ.end 部分をなくすとエラーとならないことが解りました。しかし、whileをつけて実行すると
154
-
155
- awaitが効かずpathのdelayとdurationを待たずにwhileのループが実行されてしまうためブラウザがフリーズします。
153
+ 一旦whileをはずして試したところ.end 部分をなくすとエラーとならないことが解りました。しかし、whileをつけて実行するとawaitが効かずpathのdelayとdurationを待たずにwhileのループが実行されてしまうためブラウザがフリーズします。.end を削除してawaitが効く方法を探しています。
156
154
 
157
155
 
158
156
 

6

ちょっと解ったことを記入

2020/04/22 14:32

投稿

takahashi-one
takahashi-one

スコア120

test CHANGED
File without changes
test CHANGED
@@ -136,7 +136,7 @@
136
136
 
137
137
  .attr("d", area)
138
138
 
139
- .end();
139
+ .end(); ← ここを削除するとエラーは起きないが、awaitが効かなくなる
140
140
 
141
141
  }
142
142
 
@@ -149,6 +149,12 @@
149
149
  }
150
150
 
151
151
  ```
152
+
153
+ 一旦whileをはずして試したところ.end 部分をなくすとエラーとならないことが解りました。しかし、whileをつけて実行すると
154
+
155
+ awaitが効かずpathのdelayとdurationを待たずにwhileのループが実行されてしまうためブラウザがフリーズします。
156
+
157
+
152
158
 
153
159
  ### 試したこと
154
160
 

5

誤字を修正した

2020/04/22 14:30

投稿

takahashi-one
takahashi-one

スコア120

test CHANGED
File without changes
test CHANGED
@@ -55,6 +55,8 @@
55
55
  ```
56
56
 
57
57
  下記のように配列がズラーっと表示されました。これはアニメーションをさせる時に使うデータです。ドロップダウンリストで変更した時にデータを変更します。
58
+
59
+ e.nameやe.messageがundefinedなのは、eの中に配列が入ってるだけだからと思うのですが、エラーメッセージがないPromiseのエラーって何があるのでしょうか。
58
60
 
59
61
  ```javascript
60
62
 

4

コードを追加しました

2020/04/22 09:27

投稿

takahashi-one
takahashi-one

スコア120

test CHANGED
File without changes
test CHANGED
@@ -63,6 +63,18 @@
63
63
  ```
64
64
 
65
65
  ### 該当のソースコード
66
+
67
+ 下記はchange(pattern)を呼んでいるコードです。change自体は呼ばれているので下記は問題ないと思います
68
+
69
+ ```javascript
70
+
71
+ .on("change",function(d){
72
+
73
+ change(d3.select("#selectid").node().value);
74
+
75
+ })
76
+
77
+ ```
66
78
 
67
79
  ドロップダウンリストを選択した時に1回だけanimationの種類を変えるために下記を呼んで、その中からplot()を呼びます。
68
80
 

3

誤字を直しました

2020/04/22 07:36

投稿

takahashi-one
takahashi-one

スコア120

test CHANGED
File without changes
test CHANGED
@@ -54,7 +54,7 @@
54
54
 
55
55
  ```
56
56
 
57
- 下記のように配列がズラーっと表示されました。これはアニメーションをさせる時にデータです。ドロップダウンリストで変更した時にデータを変更します。
57
+ 下記のように配列がズラーっと表示されました。これはアニメーションをさせる時に使うデータです。ドロップダウンリストで変更した時にデータを変更します。
58
58
 
59
59
  ```javascript
60
60
 
@@ -98,7 +98,9 @@
98
98
 
99
99
  ```
100
100
 
101
+ 下記plotは最初にブラウザを表示した時に直接呼ばれます。
102
+
101
- 下記plotはブラウザで表示した時と、ドロップダウンリストで値を変更した時に上記changeから呼ばれます
103
+ あとドロップダウンリストで値を変更した時に上記changeから呼ばれます
102
104
 
103
105
  ```javascript
104
106
 

2

コードをマークダウン記法にした

2020/04/22 07:29

投稿

takahashi-one
takahashi-one

スコア120

test CHANGED
File without changes
test CHANGED
@@ -20,6 +20,8 @@
20
20
 
21
21
  下記のようにしてみたところe.nameもe.messageもundefined と表示されました。
22
22
 
23
+ ```javascript
24
+
23
25
  try{
24
26
 
25
27
  //code....
@@ -32,9 +34,13 @@
32
34
 
33
35
  }
34
36
 
37
+ ```
38
+
35
39
 
36
40
 
37
41
  なので今度は下記のようみしてみたところ
42
+
43
+ ```javascript
38
44
 
39
45
  try{
40
46
 
@@ -46,17 +52,21 @@
46
52
 
47
53
  }
48
54
 
55
+ ```
56
+
49
57
  下記のように配列がズラーっと表示されました。これはアニメーションをさせる時にデータです。ドロップダウンリストで変更した時にデータを変更します。
58
+
59
+ ```javascript
50
60
 
51
61
  Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), ～
52
62
 
53
-
63
+ ```
54
64
 
55
65
  ### 該当のソースコード
56
66
 
57
67
  ドロップダウンリストを選択した時に1回だけanimationの種類を変えるために下記を呼んで、その中からplot()を呼びます。
58
68
 
59
-
69
+ ```javascript
60
70
 
61
71
  function change(pattern){
62
72
 
@@ -86,7 +96,11 @@
86
96
 
87
97
  }
88
98
 
99
+ ```
89
100
 
101
+ 下記plotはブラウザで表示した時と、ドロップダウンリストで値を変更した時に上記changeから呼ばれます
102
+
103
+ ```javascript
90
104
 
91
105
  async function plot(){
92
106
 
@@ -118,7 +132,7 @@
118
132
 
119
133
  }
120
134
 
121
-
135
+ ```
122
136
 
123
137
  ### 試したこと
124
138
 

1

使用ライブラリとコードを追加しました

2020/04/22 06:24

投稿

takahashi-one
takahashi-one

スコア120

test CHANGED
File without changes
test CHANGED
@@ -54,6 +54,38 @@
54
54
 
55
55
  ### 該当のソースコード
56
56
 
57
+ ドロップダウンリストを選択した時に1回だけanimationの種類を変えるために下記を呼んで、その中からplot()を呼びます。
58
+
59
+
60
+
61
+ function change(pattern){
62
+
63
+ path.interrupt() ;
64
+
65
+ if(pattern==0)chagevalue=p0;
66
+
67
+ else if(pattern==1)chagevalue=p1;
68
+
69
+ else if(pattern==2)chagevalue=p2;
70
+
71
+ else if(pattern==3)chagevalue=p3;
72
+
73
+ stack.offset(chagevalue);
74
+
75
+ path = svg.selectAll("path")
76
+
77
+ .data(random())
78
+
79
+ .join("path")
80
+
81
+ .attr("d", area)
82
+
83
+ .attr("fill", () => z(Math.random()));
84
+
85
+ plot();
86
+
87
+ }
88
+
57
89
 
58
90
 
59
91
  async function plot(){
@@ -100,6 +132,6 @@
100
132
 
101
133
  ### 補足情報（FW/ツールのバージョンなど）
102
134
 
103
-
135
+ ライブラリはD3jsです。
104
136
 
105
137
  ここにより詳細な情報を記載してください。