From 0ec4d05d0abdcbf03c69c8ee78cc12d0a98ec09c Mon Sep 17 00:00:00 2001
From: Jiaxing Yang <jiaxingy@udel.edu>
Date: Tue, 3 Dec 2019 08:26:17 -0500
Subject: [PATCH 1/3] fix size

---
 src/pages/Bus.vue | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/pages/Bus.vue b/src/pages/Bus.vue
index 79b42c6..8320e78 100644
--- a/src/pages/Bus.vue
+++ b/src/pages/Bus.vue
@@ -65,7 +65,7 @@ function render_d3(data,div) {
     }
   }
 
-  const WIDTH=500;
+  const WIDTH=250;
   const HEIGHT=80;
   const MARGIN={TOP:10,BOTTOM:10,LEFT:10,RIGHT:10};
 
@@ -80,8 +80,6 @@ function render_d3(data,div) {
 
     $(div).empty();
 
-    d3.select(div).style("width",WIDTH+MARGIN.LEFT+MARGIN.RIGHT);
-
     let svg=d3.select(div)
               .append("svg")
               .attr("width",WIDTH+MARGIN.LEFT+MARGIN.RIGHT)
@@ -90,7 +88,7 @@ function render_d3(data,div) {
               .attr("transform","translate("+MARGIN.LEFT+","+MARGIN.TOP+")");
 
     let x=d3.scaleLinear()
-            .domain([current-30,current+30])
+            .domain([current-15,current+15])
             .range([0,WIDTH]);
 
     svg.append("defs").append("marker")

From 230791153553425e5686a3b309199f8438c07131 Mon Sep 17 00:00:00 2001
From: Jiaxing Yang <jiaxingy@udel.edu>
Date: Tue, 3 Dec 2019 09:06:22 -0500
Subject: [PATCH 2/3] fix

---
 src/pages/Bus.vue | 36 +++++++++++++++++++++++++-----------
 1 file changed, 25 insertions(+), 11 deletions(-)

diff --git a/src/pages/Bus.vue b/src/pages/Bus.vue
index 8320e78..efa1d4c 100644
--- a/src/pages/Bus.vue
+++ b/src/pages/Bus.vue
@@ -10,7 +10,6 @@
             span {{item.start}}
             span(v-if="item.start !== item.end") -{{item.end}}
           .right.tip {{item.interval}}
-      div.svg_container#d3_workday
     ul.detail-list(v-else)
       li.info(:class="{active: item.active}" v-for='item in holiday')
         .top
@@ -18,7 +17,7 @@
             span {{item.start}}
             span(v-if="item.start !== item.end") -{{item.end}}
           .right.tip {{item.interval}}
-      div.svg_container#d3_holiday
+    div.svg_container#d3
 </template>
 <script>
 import api from "@/api";
@@ -49,7 +48,9 @@ const DATA = {
   ]
 }
 
-function render_d3(data,div) {
+let tick=setInterval(()=>{},1*1000);
+function render_d3(data,div="#d3") {
+  clearInterval(tick);
 
   // 把每一天看作24*60分钟
   let time=[]
@@ -65,7 +66,7 @@ function render_d3(data,div) {
     }
   }
 
-  const WIDTH=250;
+  const WIDTH=300;
   const HEIGHT=80;
   const MARGIN={TOP:10,BOTTOM:10,LEFT:10,RIGHT:10};
 
@@ -113,6 +114,8 @@ function render_d3(data,div) {
        .attr("stroke-width",2)
        .attr("marker-end","url(#arrow)");
 
+    const FADE_MARGIN=25;
+
     // 绘制代表班车时刻的圆点
     svg.append("g")
        .selectAll("dot")
@@ -125,7 +128,7 @@ function render_d3(data,div) {
        .attr("stroke","#555")
        .attr("stroke-width",3)
        .attr("fill","white")
-       .attr("opacity",function(d){return ((x(d)>(WIDTH-50)||x(d)<50)?("0"):("1"))});
+       .attr("opacity",function(d){return ((x(d)>(WIDTH-FADE_MARGIN)||x(d)<FADE_MARGIN)?("0"):("1"))});
 
     // 绘制班车时刻的文字
     svg.append("g")
@@ -138,7 +141,7 @@ function render_d3(data,div) {
        .attr("y",(HEIGHT/2)-15)
        .attr("text-anchor","middle")
        .attr("font-size",18)
-       .attr("opacity",function(d){return ((x(d)>(WIDTH-50)||x(d)<50)?("0"):("1"))});
+       .attr("opacity",function(d){return ((x(d)>(WIDTH-FADE_MARGIN)||x(d)<FADE_MARGIN)?("0"):("1"))});
 
     // 绘制代表当前时间的标记
     svg.append("g")
@@ -158,7 +161,8 @@ function render_d3(data,div) {
   }
 
   render();
-  setInterval(render,1*1000);
+
+  tick=setInterval(render,1*1000);
 }
 
 // 把新格式的校车班次数据适配为旧形式的校车班次数据以供界面渲染
@@ -199,8 +203,20 @@ export default {
   },
   mounted () {
     // 渲染由d3.js库绘制的数据可视化图形
-    render_d3(DATA.WORKDAY,"#d3_workday")
-    render_d3(DATA.HOLIDAY,"#d3_holiday")
+    if(this.iswork){
+      render_d3(DATA.WORKDAY)
+    }else{
+      render_d3(DATA.HOLIDAY)
+    }
+  },
+  watch:{
+    iswork(is) {
+      if(is){
+        render_d3(DATA.WORKDAY)
+      }else{
+        render_d3(DATA.HOLIDAY)
+      }
+    }
   },
   methods: {
     switchDay(event){
@@ -249,8 +265,6 @@ export default {
 
   .svg_container
     text-align center
-    margin auto
-    position relative
 
   .tooltip
     position absolute

From 047252d6b1d007706dc0e7831e011a83f9b4ff25 Mon Sep 17 00:00:00 2001
From: Jiaxing Yang <jiaxingy@udel.edu>
Date: Tue, 3 Dec 2019 09:59:11 -0500
Subject: [PATCH 3/3] fix

---
 src/pages/Bus.vue | 184 ++++++++++++++++++++++------------------------
 1 file changed, 87 insertions(+), 97 deletions(-)

diff --git a/src/pages/Bus.vue b/src/pages/Bus.vue
index efa1d4c..01ec73c 100644
--- a/src/pages/Bus.vue
+++ b/src/pages/Bus.vue
@@ -48,9 +48,12 @@ const DATA = {
   ]
 }
 
-let tick=setInterval(()=>{},1*1000);
-function render_d3(data,div="#d3") {
-  clearInterval(tick);
+function get_current_minut_of_day() {
+  let now=new Date();
+  return (now.getHours()*60+now.getMinutes());
+}
+
+function render_d3(data,current=get_current_minut_of_day(),div="#d3") {
 
   // 把每一天看作24*60分钟
   let time=[]
@@ -70,99 +73,85 @@ function render_d3(data,div="#d3") {
   const HEIGHT=80;
   const MARGIN={TOP:10,BOTTOM:10,LEFT:10,RIGHT:10};
 
-  let current=0;
-  function render(){
-    let now=new Date();
-    let c=now.getHours()*60+now.getMinutes();
-    if(c<=current){
-      return;
-    }
-    current=c;
-
-    $(div).empty();
-
-    let svg=d3.select(div)
-              .append("svg")
-              .attr("width",WIDTH+MARGIN.LEFT+MARGIN.RIGHT)
-              .attr("height",HEIGHT+MARGIN.TOP+MARGIN.BOTTOM)
-              .append("g")
-              .attr("transform","translate("+MARGIN.LEFT+","+MARGIN.TOP+")");
+  $(div).empty();
 
-    let x=d3.scaleLinear()
-            .domain([current-15,current+15])
-            .range([0,WIDTH]);
+  let svg=d3.select(div)
+            .append("svg")
+            .attr("width",WIDTH+MARGIN.LEFT+MARGIN.RIGHT)
+            .attr("height",HEIGHT+MARGIN.TOP+MARGIN.BOTTOM)
+            .append("g")
+            .attr("transform","translate("+MARGIN.LEFT+","+MARGIN.TOP+")");
 
-    svg.append("defs").append("marker")
-       .attr("id","arrow")
-       .attr("markerUnits","strokeWidth")
-       .attr("markerWidth","12")
-       .attr("markerHeight","12")
-       .attr("viewBox","0 0 12 12")
-       .attr("refX","6")
-       .attr("refY","6")
-       .attr("orient","6")
-       .append("path")
-       .attr("d","M2,2 L10,6 L2,10 L6,6 L2,2")
-       .attr("fill","#555");
+  let x=d3.scaleLinear()
+          .domain([current-15,current+15])
+          .range([0,WIDTH]);
 
-    // 绘制坐标轴
-    svg.append("g")
-       .append("line")
-       .attr("x1",0).attr("x2",WIDTH)
-       .attr("y1",HEIGHT/2).attr("y2",HEIGHT/2)
-       .attr("stroke","#555")
-       .attr("stroke-width",2)
-       .attr("marker-end","url(#arrow)");
+  svg.append("defs").append("marker")
+     .attr("id","arrow")
+     .attr("markerUnits","strokeWidth")
+     .attr("markerWidth","12")
+     .attr("markerHeight","12")
+     .attr("viewBox","0 0 12 12")
+     .attr("refX","6")
+     .attr("refY","6")
+     .attr("orient","6")
+     .append("path")
+     .attr("d","M2,2 L10,6 L2,10 L6,6 L2,2")
+     .attr("fill","#555");
 
-    const FADE_MARGIN=25;
+  // 绘制坐标轴
+  svg.append("g")
+     .append("line")
+     .attr("x1",0).attr("x2",WIDTH)
+     .attr("y1",HEIGHT/2).attr("y2",HEIGHT/2)
+     .attr("stroke","#555")
+     .attr("stroke-width",2)
+     .attr("marker-end","url(#arrow)");
 
-    // 绘制代表班车时刻的圆点
-    svg.append("g")
-       .selectAll("dot")
-       .data(time)
-       .enter()
-       .append("circle")
-       .attr("cx",function(d){return x(d)})
-       .attr("cy",HEIGHT/2)
-       .attr("r",8)
-       .attr("stroke","#555")
-       .attr("stroke-width",3)
-       .attr("fill","white")
-       .attr("opacity",function(d){return ((x(d)>(WIDTH-FADE_MARGIN)||x(d)<FADE_MARGIN)?("0"):("1"))});
+  const FADE_MARGIN=25;
 
-    // 绘制班车时刻的文字
-    svg.append("g")
-       .selectAll("dot_text")
-       .data(time)
-       .enter()
-       .append("text")
-       .text(function(d){return Math.floor(d/60)+":"+("0"+d%60).slice(-2)})
-       .attr("x",function(d){return x(d)})
-       .attr("y",(HEIGHT/2)-15)
-       .attr("text-anchor","middle")
-       .attr("font-size",18)
-       .attr("opacity",function(d){return ((x(d)>(WIDTH-FADE_MARGIN)||x(d)<FADE_MARGIN)?("0"):("1"))});
+  // 绘制代表班车时刻的圆点
+  svg.append("g")
+     .selectAll("dot")
+     .data(time)
+     .enter()
+     .append("circle")
+     .attr("cx",function(d){return x(d)})
+     .attr("cy",HEIGHT/2)
+     .attr("r",8)
+     .attr("stroke","#555")
+     .attr("stroke-width",3)
+     .attr("fill","white")
+     .attr("opacity",function(d){return ((x(d)>(WIDTH-FADE_MARGIN)||x(d)<FADE_MARGIN)?("0"):("1"))});
 
-    // 绘制代表当前时间的标记
-    svg.append("g")
-       .append("polygon")
-       .attr("fill","#00a4ca")
-       .attr("stroke-width",0)
-       .attr("points",(WIDTH/2)+","+(HEIGHT/2)+" "+(WIDTH/2-10)+","+(HEIGHT/2+15)+" "+(WIDTH/2+10)+","+(HEIGHT/2+15));
+  // 绘制班车时刻的文字
+  svg.append("g")
+     .selectAll("dot_text")
+     .data(time)
+     .enter()
+     .append("text")
+     .text(function(d){return Math.floor(d/60)+":"+("0"+d%60).slice(-2)})
+     .attr("x",function(d){return x(d)})
+     .attr("y",(HEIGHT/2)-15)
+     .attr("text-anchor","middle")
+     .attr("font-size",18)
+     .attr("opacity",function(d){return ((x(d)>(WIDTH-FADE_MARGIN)||x(d)<FADE_MARGIN)?("0"):("1"))});
 
-    // 绘制当前时间的文字
-    svg.append("g")
-       .append("text")
-       .text(function(d){return Math.floor(current/60)+":"+("0"+current%60).slice(-2)})
-       .attr("x",WIDTH/2)
-       .attr("y",(HEIGHT/2)+30)
-       .attr("text-anchor","middle")
-       .attr("font-size",18)
-  }
-
-  render();
+  // 绘制代表当前时间的标记
+  svg.append("g")
+     .append("polygon")
+     .attr("fill","#00a4ca")
+     .attr("stroke-width",0)
+     .attr("points",(WIDTH/2)+","+(HEIGHT/2)+" "+(WIDTH/2-10)+","+(HEIGHT/2+15)+" "+(WIDTH/2+10)+","+(HEIGHT/2+15));
 
-  tick=setInterval(render,1*1000);
+  // 绘制当前时间的文字
+  svg.append("g")
+     .append("text")
+     .text(function(d){return Math.floor(current/60)+":"+("0"+current%60).slice(-2)})
+     .attr("x",WIDTH/2)
+     .attr("y",(HEIGHT/2)+30)
+     .attr("text-anchor","middle")
+     .attr("font-size",18);
 }
 
 // 把新格式的校车班次数据适配为旧形式的校车班次数据以供界面渲染
@@ -203,19 +192,20 @@ export default {
   },
   mounted () {
     // 渲染由d3.js库绘制的数据可视化图形
-    if(this.iswork){
-      render_d3(DATA.WORKDAY)
-    }else{
-      render_d3(DATA.HOLIDAY)
-    }
+    render_d3((this.iswork)?(DATA.WORKDAY):(DATA.HOLIDAY));
+    // 随时间刷新
+    let last=get_current_minut_of_day();
+    setInterval(()=>{
+      let current=get_current_minut_of_day();
+      if(current!=last){
+        last=current;
+        render_d3((this.iswork)?(DATA.WORKDAY):(DATA.HOLIDAY));
+      }
+    },1*1000);
   },
   watch:{
     iswork(is) {
-      if(is){
-        render_d3(DATA.WORKDAY)
-      }else{
-        render_d3(DATA.HOLIDAY)
-      }
+      render_d3((is)?(DATA.WORKDAY):(DATA.HOLIDAY))
     }
   },
   methods: {