Add examples

Add date, ordinal & snap examples. Minor correction to properly handle ordinal scales.
MasterMaps · Oct 30, 2014 · b9e2f32 · b9e2f32
1 parent 646fe56
commit b9e2f32
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 18 deletions.
diff --git a/d3.slider.js b/d3.slider.js
@@ -211,14 +211,18 @@ return function module() {
       function onClickHorizontal() {
         if (toType(value) != "array") {
           var pos = Math.max(0, Math.min(sliderLength, d3.event.offsetX || d3.event.layerX));
-          moveHandle(stepValue(scale.invert(pos / sliderLength)));
+          moveHandle(scale.invert ? 
+                      stepValue(scale.invert(pos / sliderLength))
+                    : nearestTick(pos / sliderLength));
         }
       }
 
       function onClickVertical() {
         if (toType(value) != "array") {
           var pos = sliderLength - Math.max(0, Math.min(sliderLength, d3.event.offsetY || d3.event.layerY));
-          moveHandle(stepValue(scale.invert(pos / sliderLength)));
+          moveHandle(scale.invert ? 
+                      stepValue(scale.invert(pos / sliderLength))
+                    : nearestTick(pos / sliderLength));
         }
       }
 
@@ -229,7 +233,9 @@ return function module() {
           active = 2;
         }
         var pos = Math.max(0, Math.min(sliderLength, d3.event.x));
-        moveHandle(stepValue(scale.invert(pos / sliderLength)));
+        moveHandle(scale.invert ? 
+                    stepValue(scale.invert(pos / sliderLength))
+                  : nearestTick(pos / sliderLength));
       }
 
       function onDragVertical() {
@@ -239,7 +245,9 @@ return function module() {
           active = 2;
         }
         var pos = sliderLength - Math.max(0, Math.min(sliderLength, d3.event.y))
-        moveHandle(stepValue(scale.invert(pos / sliderLength)));
+        moveHandle(scale.invert ? 
+                    stepValue(scale.invert(pos / sliderLength))
+                  : nearestTick(pos / sliderLength));
       }
 
       function stopPropagation() {
@@ -309,20 +317,7 @@ return function module() {
 
     var alignValue = val;
     if (snap) {
-      var val_i = scale(val);
-      var ticks = scale.ticks ? scale.ticks() : scale.domain();
-      var dist = ticks.map(function(d) {return val_i - scale(d);});
-      var i = -1,
-          index = 0,
-          r = scale.ticks ? scale.range()[1] : scale.rangeExtent()[1];
-      do {
-          i++;
-          if (Math.abs(dist[i]) < r) {
-            r = Math.abs(dist[i]);
-            index = i;
-          };
-      } while (dist[i] > 0 && i < dist.length - 1);
-      alignValue = ticks[index];
+      alignValue = nearestTick(scale(val));
     } else{
       var valModStep = (val - scale.domain()[0]) % step;
       alignValue = val - valModStep;
@@ -336,6 +331,24 @@ return function module() {
 
   }
 
+  // Find the nearest tick
+  function nearestTick(pos) {
+    var ticks = scale.ticks ? scale.ticks() : scale.domain();
+    var dist = ticks.map(function(d) {return pos - scale(d);});
+    var i = -1,
+        index = 0,
+        r = scale.ticks ? scale.range()[1] : scale.rangeExtent()[1];
+    do {
+        i++;
+        if (Math.abs(dist[i]) < r) {
+          r = Math.abs(dist[i]);
+          index = i;
+        };
+    } while (dist[i] > 0 && i < dist.length - 1);
+
+    return ticks[index];
+  };
+
   // Return the type of an object
   function toType(v) {
     return ({}).toString.call(v).match(/\s([a-zA-Z]+)/)[1].toLowerCase();

diff --git a/index.html b/index.html
@@ -84,6 +84,18 @@ <h2>Vertical range slider</h2>
     <code>d3.slider().value([10, 45 ]).orientation("vertical")</code>
     <div id="slider9"></div>
 
+    <h2>Slider with dates</h2>
+    <code>d3.slider().scale(d3.time.scale().domain([new Date(1984,1,1), new Date(2014,1,1)])).axis(d3.svg.axis())</code>
+    <div id="slider10"></div>
+
+    <h2>Slider with snapping to ticks</h2>
+    <code>d3.slider().scale(d3.time.scale().domain([new Date(1984,1,1), new Date(2014,1,1)])).axis( d3.svg.axis() ).snap(true).value(new Date(2000,1,1))</code>
+    <div id="slider11"></div>
+
+    <h2>Slider with ordinal scales (categories)</h2>
+    <code>d3.slider().scale(d3.scale.ordinal().domain(["Gecko", "Webkit", "Blink", "Trident"]).rangePoints([0, 1], 0.5)).axis( d3.svg.axis() ).snap(true).value("Gecko")</code>
+    <div id="slider12"></div>
+
   </div>
 
   <script src="http://d3js.org/d3.v3.min.js"></script>
@@ -114,6 +126,13 @@ <h2>Vertical range slider</h2>
 
     d3.select('#slider9').call(d3.slider().value( [10, 30] ).orientation("vertical"));
 
+    d3.select('#slider10').call(d3.slider().scale(d3.time.scale().domain([new Date(1984,1,1), new Date(2014,1,1)])).axis(d3.svg.axis()));
+
+    d3.select('#slider11').call(d3.slider().scale(d3.time.scale().domain([new Date(1984,1,1), new Date(2014,1,1)])).axis(d3.svg.axis()).snap(true).value(new Date(2000,1,1)));
+
+    essai = d3.slider().scale(d3.scale.ordinal().domain(["Gecko", "Webkit", "Blink", "Trident"]).rangePoints([0, 1], 0.5)).axis(d3.svg.axis()).snap(true).value("Gecko");
+    d3.select('#slider12').call(essai);
+
   </script>
 
 </body>