Implement vertical slider

johnwalley · Oct 16, 2018 · c8f766d · c8f766d
1 parent 4a231fe
commit c8f766d
Show file tree

Hide file tree

Showing 9 changed files with 272 additions and 132 deletions.
diff --git a/LICENSE b/LICENSE
@@ -1,4 +1,4 @@
-Copyright 2017 John Walley
+Copyright 2017-2018 John Walley
 
 Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
 

diff --git a/README.md b/README.md
@@ -46,8 +46,7 @@ If you use NPM, `npm install d3-simple-slider`. Otherwise, download the [latest
 Regardless of orientation, sliders are always rendered at the origin. To change the position of the slider specify a [transform attribute](http://www.w3.org/TR/SVG/coords.html#TransformAttribute) on the containing element. For example:
 
 ```js
-d3
-  .select('body')
+d3.select('body')
   .append('svg')
   .attr('width', 1440)
   .attr('height', 30)
@@ -58,27 +57,27 @@ d3
 
 The orientation of a slider is fixed; to change the orientation, remove the old slider and create a new slider.
 
-<a name="sliderHorizontal" href="#sliderHorizontal">#</a> d3.<b>sliderHorizontal</b>() [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L380 'Source')
+<a name="sliderHorizontal" href="#sliderHorizontal">#</a> d3.<b>sliderHorizontal</b>() [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L442 'Source')
 
 Constructs a new horizontal slider generator.
 
-<a name="sliderVertical" href="#sliderVertical">#</a> d3.<b>sliderVertical</b>() [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L380 'Source')
+<a name="sliderVertical" href="#sliderVertical">#</a> d3.<b>sliderVertical</b>() [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L447 'Source')
 
-Constructs a new vertical slider generator. _Note this function is not yet implemented_.
+Constructs a new vertical slider generator.
 
-<a name="_slider" href="#_slider">#</a> <i>slider</i>(<i>context</i>) [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L34 'Source')
+<a name="_slider" href="#_slider">#</a> <i>slider</i>(<i>context</i>) [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L38 'Source')
 
 Render the slider to the given _context_, which may be either a [selection](https://github.com/d3/d3-selection) of SVG containers (either SVG or G elements) or a corresponding [transition](https://github.com/d3/d3-transition).
 
-<a name="slider_ticks" href="#slider_ticks">#</a> <i>slider</i>.<b>ticks</b>(<i>count</i>) [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L307 'Source')
+<a name="slider_ticks" href="#slider_ticks">#</a> <i>slider</i>.<b>ticks</b>(<i>count</i>) [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L370 'Source')
 
 To generate twenty ticks:
 
 ```js
 slider.ticks(20);
 ```
 
-<a name="slider_tickFormat" href="#slider_tickFormat">#</a> <i>slider</i>.<b>tickFormat</b>([<i>format</i>]) [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L295 'Source')
+<a name="slider_tickFormat" href="#slider_tickFormat">#</a> <i>slider</i>.<b>tickFormat</b>([<i>format</i>]) [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L358 'Source')
 
 If _format_ is specified, sets the tick format function and returns the slider. If _format_ is not specified, returns the current format function, which defaults to null. A null format indicates that the slider's default formatter should be used.
 
@@ -88,7 +87,7 @@ See [d3-format](https://github.com/d3/d3-format) and [d3-time-format](https://gi
 slider.tickFormat(d3.format(',.0f'));
 ```
 
-<a name="slider_displayFormat" href="#slider_displayFormat">#</a> <i>slider</i>.<b>displayFormat</b>([<i>format</i>]) [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L301 'Source')
+<a name="slider_displayFormat" href="#slider_displayFormat">#</a> <i>slider</i>.<b>displayFormat</b>([<i>format</i>]) [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L364 'Source')
 
 If _format_ is specified, sets the function used to format the highlighted value and returns the slider. If _format_ is not specified, returns the current format function, which defaults to null. A null format indicates that the tickFormat should be used. If tickFormat is null then the slider's default formatter should be used.
 
@@ -98,45 +97,48 @@ See [d3-format](https://github.com/d3/d3-format) and [d3-time-format](https://gi
 slider.displayFormat(d3.format(',.0f'));
 ```
 
-<a name="slider_value" href="#slider_value">#</a> <i>slider</i>.<b>value</b>([<i>value</i>]) [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L313 'Source')
+<a name="slider_value" href="#slider_value">#</a> <i>slider</i>.<b>value</b>([<i>value</i>]) [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L376 'Source')
 
 If _value_ is specified, sets the value of the slider to the specified value and returns the slider. If _value_ is not specified, returns the current value.
 
-<a name="slider_silentValue" href="#slider_silentValue">#</a> <i>slider</i>.<b>silentValue</b>([<i>value</i>]) [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L324 'Source')
+<a name="slider_silentValue" href="#slider_silentValue">#</a> <i>slider</i>.<b>silentValue</b>([<i>value</i>]) [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L387 'Source')
 
-If _value_ is specified, sets the value of the slider to the specified value and returns the slider *without* invoking any listeners. If _value_ is not specified, returns the current value.
+If _value_ is specified, sets the value of the slider to the specified value and returns the slider _without_ invoking any listeners. If _value_ is not specified, returns the current value.
 
-<a name="slider_displayValue" href="#slider_displayValue">#</a> <i>slider</i>.<b>displayValue</b>([<i>value</i>]) [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L366 'Source')
+<a name="slider_displayValue" href="#slider_displayValue">#</a> <i>slider</i>.<b>displayValue</b>([<i>value</i>]) [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L429 'Source')
 
 If _value_ is specified, sets the whether the highlighted value of the slider should be shown and returns the slider. If _value_ is not specified, returns the current value, which defaults to true.
 
-<a name="slider_handle" href="#slider_handle">#</a> <i>slider</i>.<b>handle</b>([<i>value</i>]) [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L360 'Source')
+<a name="slider_handle" href="#slider_handle">#</a> <i>slider</i>.<b>handle</b>([<i>value</i>]) [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L423 'Source')
 
 If _value_ is specified, sets the [SVG path definition](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d) used to render the slider handle and returns the slider. If _value_ is not specified, returns the current value, which defaults to 'M-5.5,-5.5v10l6,5.5l6,-5.5v-10z'.
 
+<a name="slider_width" href="#slider_width">#</a> <i>slider</i>.<b>width</b>([<i>size</i>]) [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L346 'Source')
 
-<a name="slider_width" href="#slider_width">#</a> <i>slider</i>.<b>width</b>([<i>size</i>]) [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L289 'Source')
+If _size_ is specified, sets the width of the slider to the specified value and returns the slider. If _size_ is not specified, returns the current width, which defaults to 100. This property only affects horizontal sliders and is ignored otherwise.
 
-If _size_ is specified, sets the width of the slider to the specified value and returns the slider. If _size_ is not specified, returns the current width, which defaults to 100.
+<a name="slider_height" href="#slider_height">#</a> <i>slider</i>.<b>height</b>([<i>size</i>]) [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L352 'Source')
 
-<a name="slider_min" href="#slider_min">#</a> <i>slider</i>.<b>min</b>([<i>value</i>]) [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L271 'Source')
+If _size_ is specified, sets the height of the slider to the specified value and returns the slider. If _size_ is not specified, returns the current height, which defaults to 100. This property only affects vertical sliders and is ignored otherwise.
+
+<a name="slider_min" href="#slider_min">#</a> <i>slider</i>.<b>min</b>([<i>value</i>]) [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L328 'Source')
 
 If _value_ is specified, sets the minimum value of the slider to the specified value and returns the slider. If _value_ is not specified, returns the current minimum value, which defaults to 0.
 
-<a name="slider_max" href="#slider_max">#</a> <i>slider</i>.<b>max</b>([<i>value</i>]) [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L277 'Source')
+<a name="slider_max" href="#slider_max">#</a> <i>slider</i>.<b>max</b>([<i>value</i>]) [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L334 'Source')
 
 If _value_ is specified, sets the maximum value of the slider to the specified value and returns the slider. If _value_ is not specified, returns the current maximum value, which defaults to 10.
 
-<a href="#slider_on" name="slider_on">#</a> <i>slider</i>.<b>on</b>(<i>typenames</i>, [<i>listener</i>]) [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L372 'Source')
+<a href="#slider_on" name="slider_on">#</a> <i>slider</i>.<b>on</b>(<i>typenames</i>, [<i>listener</i>]) [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L435 'Source')
 
 If _listener_ is specified, sets the event _listener_ for the specified _typenames_ and returns the slider. If an event listener was already registered for the same type and name, the existing listener is removed before the new listener is added. If _listener_ is null, removes the current event listeners for the specified _typenames_, if any. If _listener_ is not specified, returns the first currently-assigned listener matching the specified _typenames_, if any. When a specified event is dispatched, each _listener_ will be invoked with the same context and arguments as [_selection_.on](https://github.com/d3/d3-selection#selection_on) listeners: the current datum `d` and index `i`, with the `this` context as the current DOM element.
 
 The _typenames_ is a string containing one or more _typename_ separated by whitespace. Each _typename_ is a _type_, optionally followed by a period (`.`) and a _name_, such as `drag.foo` and `drag.bar`; the name allows multiple listeners to be registered for the same _type_. The _type_ must be one of the following:
 
-* `onchange` - after the slider value has changed.
-* `start` - after a new pointer becomes active (on mousedown or touchstart).
-* `drag` - after an active pointer moves (on mousemove or touchmove).
-* `end` - after an active pointer becomes inactive (on mouseup, touchend or touchcancel).
+- `onchange` - after the slider value has changed.
+- `start` - after a new pointer becomes active (on mousedown or touchstart).
+- `drag` - after an active pointer moves (on mousemove or touchmove).
+- `end` - after an active pointer becomes inactive (on mouseup, touchend or touchcancel).
 
 You might consider throttling `onchange` and `drag` events. For example using [`lodash.throttle`](https://lodash.com/docs/4.17.4#throttle).
 

diff --git a/example/index.html b/example/index.html
@@ -61,6 +61,16 @@ <h1>Transition example</h1>
       </div>
     </div>
     <a id="setValue5" href="#">Reset</a>
+    <h1>Vertical example</h1>
+    <div class="row align-items-center">
+      <div class="col-sm-2">
+        <p id="value6"></p>
+      </div>
+      <div class="col-sm">
+        <div id="slider6"></div>
+      </div>
+    </div>
+    <a id="setValue6" href="#">Reset</a>
   </div>
 </body>
 
@@ -78,13 +88,13 @@ <h1>Transition example</h1>
       d3.select("p#value1").text(d3.format('.2%')(val));
     });
 
-  var g = d3.select("div#slider1").append("svg")
+  var group1 = d3.select("div#slider1").append("svg")
     .attr("width", 500)
     .attr("height", 100)
     .append("g")
     .attr("transform", "translate(30,30)");
 
-  g.call(slider1);
+  group1.call(slider1);
 
   d3.select("p#value1").text(d3.format('.2%')(slider1.value()))
   d3.select("a#setValue1").on("click", () => { slider1.value(0.015); d3.event.preventDefault(); });
@@ -99,13 +109,13 @@ <h1>Transition example</h1>
       d3.select("p#value2").text(val);
     });
 
-  var g = d3.select("div#slider2").append("svg")
+  var group2 = d3.select("div#slider2").append("svg")
     .attr("width", 500)
     .attr("height", 100)
     .append("g")
     .attr("transform", "translate(30,30)");
 
-  g.call(slider2);
+  group2.call(slider2);
 
   d3.select("p#value2").text((slider2.value()));
   d3.select("a#setValue2").on("click", () => { slider2.value(5); d3.event.preventDefault(); });
@@ -123,13 +133,13 @@ <h1>Transition example</h1>
       d3.select("p#value3").text(d3.timeFormat('%Y')(val));
     });
 
-  var g = d3.select("div#slider3").append("svg")
+  var group3 = d3.select("div#slider3").append("svg")
     .attr("width", 500)
     .attr("height", 100)
     .append("g")
     .attr("transform", "translate(30,30)");
 
-  g.call(slider3);
+  group3.call(slider3);
 
   d3.select("p#value3").text(d3.timeFormat('%Y')(slider3.value()));
   d3.select("a#setValue3").on("click", () => { slider3.value(new Date(1997, 11, 17)); d3.event.preventDefault(); });
@@ -148,13 +158,13 @@ <h1>Transition example</h1>
       d3.select("p#value4").text(d3.format('.2%')(val));
     });
 
-  var g = d3.select("div#slider4").append("svg")
+  var group4 = d3.select("div#slider4").append("svg")
     .attr("width", 500)
     .attr("height", 100)
     .append("g")
     .attr("transform", "translate(30,30)");
 
-  g.call(slider4);
+  group4.call(slider4);
 
   d3.select("p#value4").text(d3.format('.2%')(slider4.value()))
   d3.select("a#setValue4").on("click", () => { slider4.value(0.015); d3.event.preventDefault(); });
@@ -168,21 +178,41 @@ <h1>Transition example</h1>
       d3.select("p#value5").text(val);
     });
 
-  var g = d3.select("div#slider5").append("svg")
+  var group5 = d3.select("div#slider5").append("svg")
     .attr("width", 500)
     .attr("height", 100)
     .append("g")
     .attr("transform", "translate(30,30)");
 
-  g.call(slider5);
+  group5.call(slider5);
 
   setInterval(() => {
     slider5.width(Math.random() * 200 + 100);
-    g.transition().duration(1000).call(slider5);
+    group5.transition().duration(1000).call(slider5);
   }, 4000);
 
   d3.select("p#value5").text((slider5.value()));
   d3.select("a#setValue5").on("click", () => { slider5.value(5); d3.event.preventDefault(); });
+
+  var slider6 = d3.sliderVertical()
+    .min(0)
+    .max(10)
+    .step(1)
+    .height(300)
+    .on('onchange', val => {
+      d3.select("p#value6").text(val);
+    });
+
+  var group6 = d3.select("div#slider6").append("svg")
+    .attr("width", 100)
+    .attr("height", 360)
+    .append("g")
+    .attr("transform", "translate(60,30)");
+
+  group6.call(slider6);
+
+  d3.select("p#value6").text((slider6.value()));
+  d3.select("a#setValue6").on("click", () => { slider6.value(5); d3.event.preventDefault(); });
 </script>
 
 </html>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "d3-simple-slider",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "Renders an SVG slider",
   "keywords": [
     "d3",