Skip to content

Commit

Permalink
Improve styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@johnwalley
johnwalley committed Oct 24, 2017
1 parent 2c3019e commit 8b946ab
Show file tree
Hide file tree
Showing 3 changed files with 115 additions and 23 deletions.
35 changes: 35 additions & 0 deletions example/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
<script src="../build/d3-simple-slider.js"></script>

<body>
<p id="value">Move me</p>
<div id="value"></div>
<a id="setValue" href="#">Set value</a>
<a id="changeWidth" href="#">Change width</a>
</body>

<script>
var data = [0, 0.005, 0.01, 0.015, 0.02, 0.025];

var slider = d3Slider.sliderHorizontal()
.domain(d3.extent(data))
.width(300)
.tickFormat(d3.format('.2%'))
.ticks(5)
.default(0.015)
.on('onchange', val => {
d3.select("p#value").text(d3.format('.2%')(val));
});

var g = d3.select("div#value").append("svg")
.attr("width", 500)
.attr("height", 100)
.append("g")
.attr("transform", "translate(30,30)");

g.call(slider);

d3.select("a#setValue").on("click", () => slider.value(0.01));
d3.select("a#changeWidth").on("click", () => g.call(slider.width(Math.floor(Math.random() * 500) + 200)));
</script>
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "d3-simple-slider",
"version": "0.1.1",
"version": "0.1.2",
"description": "Displays an SVG slider",
"keywords": [
"d3",
Expand Down
101 changes: 79 additions & 22 deletions src/slider.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import _ from 'lodash';

function slider() {
var value;
var defaultValue;
var domain = [0, 100];
var width = 100;

Expand Down Expand Up @@ -35,6 +36,7 @@ function slider() {
.append('g')
.attr('class', 'slider')
.attr('cursor', 'ew-resize')
.attr('transform', 'translate(0,10)')
.call(d3.drag()
.on('start', dragstarted)
.on('drag', dragged)
Expand All @@ -43,39 +45,48 @@ function slider() {
sliderEnter.append('line')
.attr('class', 'track')
.attr('x1', 0)
.attr('y1', 3)
.attr('y2', 3)
.attr('y1', -7)
.attr('y2', -7)
.attr('stroke', '#bbb')
.attr('stroke-width', 6)
.attr('stroke-linecap', 'round')
.merge(slider.select('.track'));
.attr('stroke-linecap', 'round');

sliderEnter.append('line')
.attr('class', 'track-inset')
.attr('x1', 0)
.attr('y1', 3)
.attr('y2', 3)
.attr('y1', -7)
.attr('y2', -7)
.attr('stroke', '#eee')
.attr('stroke-width', 4)
.attr('stroke-linecap', 'round');

sliderEnter.append('line')
.attr('class', 'track-overlay')
.attr('x1', 0)
.attr('y1', 3)
.attr('y2', 3)
.attr('y1', -7)
.attr('y2', -7)
.attr('stroke', 'transparent')
.attr('stroke-width', 40)
.attr('stroke-linecap', 'round')
.merge(slider.select('.track-overlay'))
.attr('x2', scale.range()[1]);
.merge(slider.select('.track-overlay'));

sliderEnter.append('path')
.attr('class', 'handle')
var handleEnter = sliderEnter.append('g')
.attr('class', 'parameter-value')
.attr('transform', 'translate(' + scale(value) + ',-10)')
.style('font-size', 12)
.style('font-family', 'sans-serif')
.style('text-anchor', 'middle');

handleEnter.append('path')
.attr('d', 'M-5.5,-2.5v10l6,5.5l6,-5.5v-10z')
.attr('fill', 'white')
.attr('stroke', '#777');

handleEnter.append('text')
.attr('y', 30)
.attr('dy', '.71em')
.text(tickFormat(value));

context.select('.track')
.attr('x2', scale.range()[1]);

Expand All @@ -88,15 +99,31 @@ function slider() {
context.select('.axis').call(d3.axisBottom(scale).tickFormat(tickFormat).ticks(ticks));

context.select('.axis')
.selectAll('text')
.attr('dy', '22px');
.attr('transform', 'translate(0,10)');

context.select('.axis').select('.domain').remove();

context.selectAll('.axis text')
.attr('fill', '#aaa')
.attr('y', 20)
.attr('dy', '.71em')
.style('text-anchor', 'middle');

context.selectAll('.axis line')
.attr('stroke', '#aaa');

context.select('.parameter-value')
.attr('transform', 'translate(' + scale(value) + ',' + -10 + ')');

fadeTickText();

function dragstarted() {
d3.select(this).raise().classed('active', true);
var pos = scaleClamped(d3.event.x);
selection.select('.handle').attr('transform', 'translate(' + pos + ',' + 0 + ')');
selection.select('.parameter-value').attr('transform', 'translate(' + pos + ',' + -10 + ')');

var newValue = scale.invert(pos);
selection.select('.parameter-value text').text(tickFormat(newValue));
dispatch.call('start', slider, newValue);

if (value !== newValue) {
Expand All @@ -105,8 +132,7 @@ function slider() {
}
}

var throttleUpdate = _.throttle(function (pos) {
var newValue = scale.invert(pos);
var throttleUpdate = _.throttle(function (newValue) {
dispatch.call('drag', slider, newValue);

if (value !== newValue) {
Expand All @@ -117,26 +143,48 @@ function slider() {

function dragged() {
var pos = scaleClamped(d3.event.x);
selection.select('.handle').attr('transform', 'translate(' + pos + ',' + 0 + ')');
selection.select('.parameter-value').attr('transform', 'translate(' + pos + ',' + -10 + ')');

fadeTickText();

throttleUpdate(pos);
var newValue = scale.invert(pos);
selection.select('.parameter-value text').text(tickFormat(newValue));

throttleUpdate(newValue);
}

function dragended() {
d3.select(this).classed('active', false);
var pos = scaleClamped(d3.event.x);
selection.select('.handle').attr('transform', 'translate(' + pos + ',' + 0 + ')');
selection.select('.parameter-value').attr('transform', 'translate(' + pos + ',' + -10 + ')');

var newValue = scale.invert(pos);
selection.select('.parameter-value text').text(tickFormat(newValue));
dispatch.call('end', slider, newValue);
value = newValue;
fadeTickText();

if (value !== newValue) {
value = newValue;
dispatch.call('onchange', slider, newValue);
}
}
}

function fadeTickText() {
var distances = [];

selection.selectAll('.axis .tick').each(function (d, i) {
distances.push(Math.abs(d - value));
});

var index = d3.scan(distances);

selection.selectAll('.axis .tick text')
.transition()
.duration(10)
.attr('opacity', function (d, i) { return i === index ? 0 : 1; });
}

slider.min = function (_) {
if (!arguments.length) return domain[0];
domain[0] = _;
Expand Down Expand Up @@ -176,18 +224,27 @@ function slider() {
slider.value = function (_) {
if (!arguments.length) return value;
var pos = scaleClamped(scale(_));
selection.select('.handle').transition().ease(d3.easeQuadOut).duration(200).attr('transform', 'translate(' + pos + ',' + 0 + ')');
selection.select('.parameter-value').transition().ease(d3.easeQuadOut).duration(200).attr('transform', 'translate(' + pos + ',' + -10 + ')');

var newValue = scale.invert(pos);
selection.select('.parameter-value text').text(tickFormat(newValue));

if (value !== newValue) {
value = newValue;
fadeTickText();
dispatch.call('onchange', slider, newValue);
}

return slider;
}

slider.default = function (_) {
if (!arguments.length) return defaultValue;
defaultValue = _;
value = _;
return slider;
}

slider.on = function () {
var value = dispatch.on.apply(dispatch, arguments);
return value === dispatch ? slider : value;
Expand Down

0 comments on commit 8b946ab

Please sign in to comment.