Update index.html

index.html

@@ -7,14 +7,10 @@
         body {
             font-family: Arial, sans-serif;
             text-align: center;
+            margin: 0;
+            padding: 0;
         }
-        .chart-container {
-            display: inline-block;
-            margin: 20px;
-        }
-        svg {
-            border: 1px solid #ccc;
-        }
+        /* ボタンのスタイル */
         button {
             padding: 10px 20px;
             font-size: 16px;
@@ -35,10 +31,10 @@
         }
         .modal-content {
             background-color: #fefefe;
-            margin: 10% auto; /* 上下にマージン、中央揃え */
+            margin: 5% auto; /* 上下にマージン、中央揃え */
             padding: 20px;
             border: 1px solid #888;
-            width: 80%; /* 幅を80%に */
+            width: 90%; /* 幅を90%に */
             max-width: 600px; /* 最大幅を600pxに */
             border-radius: 8px;
             position: relative;
@@ -78,6 +74,39 @@
         .modal-buttons button {
             margin-left: 10px;
         }
+        /* グラフコンテナのスタイル */
+        #charts {
+            display: block;
+            width: 100%;
+            box-sizing: border-box;
+        }
+        .chart-container {
+            width: 100%;
+            height: 30vh; /* ビューポート高さの30% */
+            margin: 10px 0;
+            position: relative;
+        }
+        svg {
+            width: 100%;
+            height: 100%;
+            border: 1px solid #ccc;
+            box-sizing: border-box;
+        }
+        /* Rawデータ表示のスタイル */
+        #rawDataOutput {
+            width: 90%;
+            margin: 20px auto;
+            text-align: left;
+        }
+        #rawDataDisplay {
+            width: 100%;
+            max-height: 200px;
+            overflow: auto;
+            border: 1px solid #ccc;
+            padding: 10px;
+            background-color: #f9f9f9;
+            white-space: pre-wrap;
+        }
     </style>
     <!-- D3.jsの読み込み -->
     <script src="https://d3js.org/d3.v7.min.js"></script>
@@ -90,21 +119,21 @@
     <div id="charts">
         <div class="chart-container">
             <h3>左センサー</h3>
-            <svg id="leftChart" width="500" height="200"></svg>
+            <svg id="leftChart"></svg>
         </div>
         <div class="chart-container">
             <h3>中央センサー</h3>
-            <svg id="centerChart" width="500" height="200"></svg>
+            <svg id="centerChart"></svg>
         </div>
         <div class="chart-container">
             <h3>右センサー</h3>
-            <svg id="rightChart" width="500" height="200"></svg>
+            <svg id="rightChart"></svg>
         </div>
     </div>
 
     <div id="rawDataOutput">
         <h2>Rawデータ</h2>
-        <pre id="rawDataDisplay" style="text-align: left; width: 80%; margin: 0 auto; max-height: 200px; overflow: auto; border: 1px solid #ccc; padding: 10px;"></pre>
+        <pre id="rawDataDisplay"></pre>
     </div>
 
     <!-- モーダルダイアログ -->
@@ -287,25 +316,26 @@
             }
         };
 
-        const width = 500;
-        const height = 200;
-        const margin = {top: 20, right: 30, bottom: 30, left: 50};
-
         function initCharts() {
             for (let key in charts) {
                 const chart = charts[key];
+                const svgElement = chart.svg.node();
+                const boundingRect = svgElement.getBoundingClientRect();
+                const width = boundingRect.width;
+                const height = boundingRect.height;
+
                 // スケールの設定
-                chart.xScale = d3.scaleLinear().domain([0, MAX_POINTS - 1]).range([margin.left, width - margin.right]);
-                chart.yScale = d3.scaleLinear().domain([0, 1023]).range([height - margin.bottom, margin.top]);  // 初期Y軸スケール
+                chart.xScale = d3.scaleLinear().domain([0, MAX_POINTS - 1]).range([50, width - 50]);
+                chart.yScale = d3.scaleLinear().domain([0, 1023]).range([height - 30, 20]);  // マージンを考慮
 
                 // 軸の追加
                 chart.svg.append("g")
-                    .attr("transform", `translate(0,${height - margin.bottom})`)
+                    .attr("transform", `translate(0,${height - 30})`)
                     .attr("class", "x-axis")
                     .call(d3.axisBottom(chart.xScale));
 
                 chart.svg.append("g")
-                    .attr("transform", `translate(${margin.left},0)`)
+                    .attr("transform", `translate(50,0)`)
                     .attr("class", "y-axis")
                     .call(d3.axisLeft(chart.yScale));
 
@@ -322,6 +352,11 @@
                     .attr("stroke-width", 2)
                     .attr("d", chart.line);
             }
+
+            // リサイズイベントの設定
+            window.addEventListener('resize', () => {
+                resizeCharts();
+            });
         }
 
         initCharts();
@@ -467,6 +502,15 @@
         function updateCharts() {
             for (let key in charts) {
                 const chart = charts[key];
+                const svgElement = chart.svg.node();
+                const boundingRect = svgElement.getBoundingClientRect();
+                const width = boundingRect.width;
+                const height = boundingRect.height;
+
+                // スケールの再設定
+                chart.xScale.range([50, width - 50]);
+                chart.yScale.range([height - 30, 20]);  // マージンを考慮
+
                 // Yスケールの更新
                 let yMin, yMax;
                 if (includeZeroCheckbox.checked) {
@@ -487,17 +531,50 @@
                 // パスの更新
                 chart.path
                     .datum(chart.data)
+                    .transition()
+                    .duration(500)
                     .attr("d", chart.line);
             }
+        }
 
-            // Xスケールの更新（常に0からMAX_POINTS -1）
+        // -------------------------------
+        // グラフのリサイズ関数
+        // -------------------------------
+        function resizeCharts() {
             for (let key in charts) {
                 const chart = charts[key];
-                chart.xScale.domain([0, MAX_POINTS - 1]);
-                chart.svg.select(".x-axis")
+                const svgElement = chart.svg.node();
+                const boundingRect = svgElement.getBoundingClientRect();
+                const width = boundingRect.width;
+                const height = boundingRect.height;
+
+                // スケールの更新
+                chart.xScale.range([50, width - 50]);
+                chart.yScale.range([height - 30, 20]);  // マージンを考慮
+
+                // Yスケールの更新
+                let yMin, yMax;
+                if (includeZeroCheckbox.checked) {
+                    yMin = d3.min(chart.data.concat([0])) || 0;
+                    yMax = d3.max(chart.data.concat([0])) || 1023;
+                } else {
+                    yMin = d3.min(chart.data) || 0;
+                    yMax = d3.max(chart.data) || 1023;
+                }
+                chart.yScale.domain([Math.min(yMin, 0), Math.max(yMax, 0)]);
+
+                // Y軸の再描画
+                chart.svg.select(".y-axis")
                     .transition()
                     .duration(500)
-                    .call(d3.axisBottom(chart.xScale));
+                    .call(d3.axisLeft(chart.yScale));
+
+                // パスの更新
+                chart.path
+                    .datum(chart.data)
+                    .transition()
+                    .duration(500)
+                    .attr("d", chart.line);
             }
         }