feat: geoTimeSlider

hongfaqiu · May 22, 2024 · 5878021 · 5878021
1 parent 0a9b0a4
commit 5878021
Show file tree

Hide file tree

Showing 8 changed files with 1,461 additions and 750 deletions.
diff --git a/README.md b/README.md
diff --git a/img/geoTimeSlider.gif b/img/geoTimeSlider.gif
diff --git a/index.html b/index.html
@@ -91,14 +91,18 @@ <h2>Simplify geoTimeScale</h2>
   <h2>Complete geoTimeScale ( Equal distance )</h2>
   <div id="geoTimeScale"></div>
 
+  <h1>GeoTimeSlider</h1>
+  <div id="geoTimeSlider"></div>
+
+
   <script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
   <script src="./dist/index.umd.js"></script>
 
   <script type="module">
     import TimeScaleVersions from './timescales.js';
 
     function clearAll() {
-      ["geoTimeFullWidth", "unequal", "geoTimeSmall", "geoTimeScale-simple", "geoTimeScale"].map(id => {
+      ["geoTimeFullWidth", "unequal", "geoTimeSmall", "geoTimeScale-simple", "geoTimeScale", "geoTimeSlider"].map(id => {
         const item = document.getElementById(id)
         if (item) item.innerHTML = ''
       })
@@ -178,6 +182,13 @@ <h2>Complete geoTimeScale ( Equal distance )</h2>
           geoTimeScale1.stage = this.value
           geoTimeScale2.stage = this.value
         }
+
+        // geotimeSlider
+        const geoTimeSlider = new timeLine.GeoTimeSlider("#geoTimeSlider", intervals, {
+          onChange: (val) => {
+            console.log(val);
+          }
+        })
 
       })
     }