編集履歴

質問編集履歴

写真の追加

2021/09/23 23:34

投稿

putaro

スコア9

title CHANGED Viewed

File without changes

body CHANGED Viewed

@@ -17,15 +17,17 @@
  {"start":0
  ,"stop":0.9
  ,"step":0.01666666666666
- ,"as":"time_series"}
+ ,"as":"time"}
  }
  ,"mark":"line",
  "encoding":{
-   "x":{"field":"time_series","type":"quantitative"}
+   "x":{"field":"time","type":"quantitative"}
  ,"y":{"field":"x","type":"quantitative"}
  }
  ,"title":"Time Series Chart"}
 ```
+### Vega Editorの描画結果
+![グラフ](c6057e2258ffe535db2817e0c92425db.png)
 ### データセットを作成するコード
 ```js

問題点の一部改善

2021/09/23 23:34

投稿

putaro

スコア9

title CHANGED Viewed

	@@ -1,1 +1,1 @@
1	- Vega-Liteで~~WARN Infinite extent for field "Time_Seriesl": [Infinity, -Infinity]の警告~~が表示される
1	+ Vega-Liteでグラフが表示されない

body CHANGED Viewed

@@ -1,6 +1,5 @@
 ### 前提・実現したいこと
-加速度センサーから取得した値を、**Vega-Lite**を使って可視化させようとしたのですが、画面には描画されず、エラーを確認したところ
+加速度センサーから取得した値を、**Vega-Lite**を使って可視化させようとしたのですが、ブラウザには描画されず、**Vega Editor**を使って直接、値を入力してグラフの作成も試みたのですが、やはりダメでした。
-**WARN Infinite extent for field "Time_Seriesl": [Infinity, -Infinity]**と表示されていました。自分では原因がわからずどのようにすれば描画できるでしょうか。
 ### 使用環境
 macOS ver 11.6
 node.js ver v16.8.0
@@ -9,51 +8,25 @@
 https://cdn.jsdelivr.net/npm/vega-lite@5.1.1
 https://cdn.jsdelivr.net/npm/vega-embed@6.18.2
 ### 作成したデータセット
+データ数は54個　X軸が計測時間のシーケンス、Y軸が加速度センサーの軸のどれかの値（今回はx軸）
 ```
-{
-  '$schema': 'https://vega.github.io/schema/vega-lite/v5.json',
-  // 加速度センサーのデータ
-  data: {
-    values: [
-      //　加速度センサーのデータ
-      [Object], [Object], [Object], [Object], [Object], [Object],
-      [Object], [Object], [Object], [Object],
-      ... 107201 more items
-    ],
-    // x軸用のシーケンスを作成
-    sequence: {
-      start: 0,
-      stop: 1788.35,
-      step: 0.016666666666666666,
-      as: 'Time_Series'
-    }
-  },
-  // 折線グラフ
-  mark: 'line',
-  encoding: {
-    // 先ほど作成したシーケンス
-    x: { field: 'Time_Seriesl', type: 'temporal' },
-    // 加速度センサーのx軸の値
-    y: { field: 'x', type: 'quantitative' }
-  },
-  title: 'Time Series Chart'
-}
+ {"$schema":"https://vega.github.io/schema/vega-lite/v5.json",
+"data":{
+   "values":[{"x":0.018,"y":0.034,"z":0.066},{"x":0.01,"y":0.044,"z":0.079},{"x":0.018,"y":0.031,"z":0.069},{"x":0.021,"y":0.032,"z":0.072},{"x":0.02,"y":0.038,"z":0.071},{"x":0.015,"y":0.04,"z":0.072},{"x":0.024,"y":0.039,"z":0.067},{"x":0.02,"y":0.032,"z":0.067},{"x":0.017,"y":0.033,"z":0.065},{"x":0.022,"y":0.038,"z":0.074},{"x":0.019,"y":0.03,"z":0.072},{"x":0.015,"y":0.042,"z":0.068},{"x":0.019,"y":0.044,"z":0.074},{"x":0.01,"y":0.045,"z":0.075},{"x":0.015,"y":0.034,"z":0.072},{"x":0.016,"y":0.032,"z":0.063},{"x":0.02,"y":0.042,"z":0.065},{"x":0.02,"y":0.032,"z":0.065},{"x":0.019,"y":0.036,"z":0.077},{"x":0.017,"y":0.037,"z":0.08},{"x":0.028,"y":0.031,"z":0.065},{"x":0.022,"y":0.037,"z":0.067},{"x":0.015,"y":0.043,"z":0.06},{"x":0.022,"y":0.037,"z":0.072},{"x":0.019,"y":0.037,"z":0.065},{"x":0.018,"y":0.033,"z":0.069},{"x":0.023,"y":0.033,"z":0.073},{"x":0.022,"y":0.031,"z":0.055},{"x":0.022,"y":0.039,"z":0.058},{"x":0.015,"y":0.038,"z":0.065},{"x":0.025,"y":0.035,"z":0.067},{"x":0.015,"y":0.048,"z":0.074},{"x":0.012,"y":0.037,"z":0.079},{"x":0.021,"y":0.023,"z":0.067},{"x":0.013,"y":0.026,"z":0.067},{"x":0.01,"y":0.037,"z":0.072},{"x":0.022,"y":0.036,"z":0.067},{"x":0.019,"y":0.035,"z":0.072},{"x":0.019,"y":0.04,"z":0.075},{"x":0.016,"y":0.028,"z":0.067},{"x":0.023,"y":0.041,"z":0.076},{"x":0.018,"y":0.033,"z":0.064},{"x":0.019,"y":0.029,"z":0.066},{"x":0.018,"y":0.032,"z":0.071},{"x":0.028,"y":0.042,"z":0.065},{"x":0.022,"y":0.031,"z":0.06},{"x":0.018,"y":0.034,"z":0.072},{"x":0.02,"y":0.035,"z":0.065},{"x":0.018,"y":0.029,"z":0.064},{"x":0.019,"y":0.036,"z":0.081},{"x":0.013,"y":0.038,"z":0.07},{"x":0.014,"y":0.033,"z":0.075},{"x":0.02,"y":0.036,"z":0.069},{"x":0.016,"y":0.04,"z":0.071}],
+ "sequence":
+ {"start":0
+ ,"stop":0.9
+ ,"step":0.01666666666666
+ ,"as":"time_series"}
+ }
+ ,"mark":"line",
+ "encoding":{
+   "x":{"field":"time_series","type":"quantitative"}
+ ,"y":{"field":"x","type":"quantitative"}
+ }
+ ,"title":"Time Series Chart"}
 ```
-### 加速度センサーのデータ
-```
-{
-  values: [
-    { x: 0.018, y: 0.034, z: 0.066 },
-    { x: 0.01, y: 0.044, z: 0.079 },
-    { x: 0.018, y: 0.031, z: 0.069 },
-    { x: 0.02, y: 0.038, z: 0.071 },
-    { x: 0.015, y: 0.04, z: 0.072 },
-    { x: 0.017, y: 0.026, z: 0.069 },
-    { x: 0.015, y: 0.042, z: 0.069 },
-    ... 107201 more items
-  ]
-}
-```
 ### データセットを作成するコード
 ```js
 router.post('/graph', /*async*/ function(req, res, next) {

問題点を全部確認するため

2021/09/23 23:32

投稿

putaro

スコア9

title CHANGED Viewed

File without changes

body CHANGED Viewed

@@ -92,4 +92,73 @@
 module.exports = router;
 ```
-色々と調べてはみたのですが、はっきりとは意味がわからなかったです。
+色々と調べてはみたのですが、はっきりとは意味がわからなかったです。
+### 追記
+ejsのソースコード
+```ejs
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title><%= title%></title>
+    <link rel="stylesheet" href="/stylesheets/style.min.css" />
+    <link rel="stylesheet" href="/stylesheets/style.css" />
+    <script src="/javascripts/jquery-3.6.0.min.js"></script>
+    <script src="/javascripts/jstree.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vega@5.20.2"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vega-lite@5.1.1"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vega-embed@6.18.2"></script>
+  </head>
+  <body>
+    <div id="content">
+        <header>
+        ヘッダー部分
+        </header>
+        <div id="split-panel">
+            <div id="left-panel">
+                <div id="file_tree"></div>
+            </div>
+            <div id="right-panel">
+                <div id="chart"></div>
+                <!-- ここ描画 -->
+            </div>
+        </div>
+    </div>
+    <script src="/javascripts/readTree.js"></script>
+  </body>
+</html>
+```
+### ejsに描画させるコード
+```js
+$('#file_tree').on("changed.jstree", function (e, data) {
+    var myReg = new RegExp('.+\.\w{3}$');
+    if (myReg.test(data.selected[0])) {
+        // データがあるURL
+        var url = "BASE_URL" + data.node['parent'] + '/' + data.selected[0];
+        console.log(url);
+        $.ajax({
+            async:true,
+            url:"http://localhost:3000/graph",
+            type: 'POST',
+            data:{'url':url},
+            contentType: 'application/x-www-form-urlencoded; charset=UTF-8'
+        }).done((data) => {
+        console.log('成功');
+        // 作成したデータセット
+        var vlSpec = data;
+        // 描画させる
+        vegaEmbed('#chart', vlSpec);
+    }).fail(() => {
+        console.log('失敗');
+    });
+    } else {
+        console.log("Folder")
+    }
+});
+```