Skip to content

Instantly share code, notes, and snippets.

@jcardente jcardente/slider.js
Created Nov 2, 2015

What would you like to do?
Slider control in D3js
// Simple slider control in D3js.
// Based on Mike Bostock's example
// Slider in D3
function makeSlider(label, x,y,scale,cb) {
var brush = d3.svg.brush()
.on("brush", brushed);
var label = svg.append("text")
.attr("x", x-5)
.attr("y", y)
var brushg = svg.append("g")
.attr("transform", "translate(" + x + "," + (y+10) + ")");
.attr("class", "x axis")
.tickFormat(function(d) {return Math.floor(d*100) + "%";})
var slider = brushg.append("g")
.attr("class", "slider")
var handle = slider.append("circle")
.attr("r", 5)
.attr("cx", 0)
.attr("cy", 0)
.attr("stroke", "#000")
.attr("fill", "#DDD");;
function brushed() {
var value = brush.extent()[0];
if (d3.event.sourceEvent) { // not a programmatic event
value = scale.invert(d3.mouse(this)[0]);
brush.extent([value, value]);
handle.attr("cx", scale(value));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.