d3.js brush slider

d3.js brush slider

CSS

.axis {
    font: 10px sans-serif;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}
.axis .domain {
    fill: none;
    stroke: #000;
    stroke-opacity: .3;
    stroke-width: 6px;
    stroke-linecap: round;
}
.axis .halo {
    fill: none;
    stroke: #ddd;
    stroke-width: 6px;
    stroke-linecap: round;
}
.slider .handle {
    fill: #fff;
    stroke: #000;
    stroke-opacity: .5;
    stroke-width: 1.25px;
    pointer-events: none;
}

JavaScript

var margin = {
    top: 20,
    right: 20,
    bottom: 20,
    left: 20
},
width = 600 - margin.left - margin.right,
    height = 100 - margin.bottom - margin.top;

var x = d3.scale.linear()
    .domain([-50, 50])
    .range([0, width])
    .clamp(true);

var brush = d3.svg.brush()
    .x(x)
    .on("brush", brushed);

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var numbers = function (value) {
    d3.select("#text").text(Math.round(value));
};


svg.append("text").text("asdf")
    .attr({
    "id": "text"
});

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height / 2 + ")")
    .call(d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .tickFormat(function (d) {
    return d + "°";
})
    .ticks(0)
    .tickSize(0)
    .tickPadding(12))
    .select(".domain")
    .select(function () {
    return this.parentNode.appendChild(this.cloneNode(true));
})
    .attr("class", "halo");

var slider = svg.append("g")
    .attr("class", "slider")
    .call(brush);

slider.selectAll(".extent,.resize")
    .remove();

slider.select(".background")
    .attr("height", height)
    .style("cursor", "pointer");

var handle = slider.append("circle")
    .attr("class", "handle")
    .attr("transform", "translate(0," + height / 2 + ")")
    .attr("r", 11);
/*
slider
    .call(brush.event)
  .transition() // gratuitous intro!
    .duration(750)
    .call(brush.extent([70, 70]))
    .call(brush.event);
*/

slider.call(brush.extent([0, 0]))
    .call(brush.event);



function brushed() {
    var value = brush.extent()[0];

    if (d3.event.sourceEvent) { // not a programmatic event
        value = x.invert(d3.mouse(this)[0]);
        brush.extent([value, value]);
    }

    handle.attr("cx", x(value));
   ...