From 60d4044c2fbbe396b6b6226ec069712756604fc4 Mon Sep 17 00:00:00 2001 From: johnwalley Date: Wed, 25 Oct 2017 08:44:47 +0100 Subject: [PATCH] Update README and example --- README.md | 72 ++++++++++++++++++++++++++++++++++++++++++++++ example/index.html | 38 +++++++++++++++++++----- src/slider.js | 2 +- 3 files changed, 104 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index 281bbf5..f3df911 100644 --- a/README.md +++ b/README.md @@ -5,3 +5,75 @@ This component renders a simple interactive slider. [Live demo](https://bl.ocks.org/johnwalley/e1d256b81e51da68f7feb632a53c3518/32f0f75e8b8fdfa212604f3a77cb022187f12cbf) Inspired by The New York Times [Is It Better to Rent or Buy?](https://www.nytimes.com/interactive/2014/upshot/buy-rent-calculator.html) + +## API Reference + +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").append("svg") + .attr("width", 1440) + .attr("height", 30) + .append("g") + .attr("transform", "translate(0,30)") + .call(slider); +``` + +The orientation of a slider is fixed; to change the orientation, remove the old slider and create a new slider. + +# d3.sliderHorizontal() [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L256 "Source") + +Constructs a new horizontal slider generator. + +# d3.sliderVertical() [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L256 "Source") + +Constructs a new vertical slider generator. Note this function is not yet implemented. + +# slider(context) [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L19 "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). + +# slider.ticks(count) [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#L218 "Source") + +To generate twenty ticks: + +```js +slider.ticks(20); +``` + +# slider.tickFormat([format]) [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#212 "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. + +See [d3-format](https://github.com/d3/d3-format) and [d3-time-format](https://github.com/d3/d3-time-format) for help creating formatters. For example, to display integers with comma-grouping for thousands: + +```js +slider.tickFormat(d3.format(",.0f")); +``` + +# slider.width([size]) [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#212 "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. + +# slider.min([value]) [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#212 "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. + +# slider.max([value]) [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#212 "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. + +# slider.on(typenames, [listener]) [<>](https://github.com/johnwalley/d3-simple-slider/blob/master/src/slider.js#2127 "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). + +Note that `onchange` and `drag` events are throttled while the slider is being actively moved. + +See [*dispatch*.on](https://github.com/d3/d3-dispatch#dispatch_on) for more. diff --git a/example/index.html b/example/index.html index b36f634..b03d163 100644 --- a/example/index.html +++ b/example/index.html @@ -1,19 +1,40 @@ + + +d3-simple-slider + + + + + + -

Move me

-
- Set value - Change width +
+

Basic example

+
+
+

+
+
+
+
+
+ Reset +
+ Change width +
\ No newline at end of file + + + \ No newline at end of file diff --git a/src/slider.js b/src/slider.js index 72aab7b..ebfaa20 100644 --- a/src/slider.js +++ b/src/slider.js @@ -4,7 +4,7 @@ import _ from 'lodash'; function slider() { var value; var defaultValue; - var domain = [0, 100]; + var domain = [0, 10]; var width = 100; var tickFormat = null;