D3.js drag slider

by Michael Keller

CSS

rect {
  float: left;
  border: solid 1px #aaa;
}

JavaScript

var drag = d3.behavior.drag()
            .origin(Object)
            .on("drag", dragMove)
            .on('dragend', dragEnd);
var drag_width = 260;

var dragScale = d3.scale.pow()
        .exponent(5)
        .domain([0,drag_width])
        .range([1,50000000]);

var siNotation = d3.format('.2s');

var svg = d3.select('body')
                .append('svg')
                .attr("height", 200)
                .attr("width", 300);

var g = svg.selectAll('g')
            .data([{x: 100, y : 20}])
            .enter()
                .append('g')
                .attr("height", 200)
                .attr("width", drag_width)
                .attr('transform', 'translate(20, 10)');

var rect = g
                .append('rect')
                .attr('y', 17)
                .attr("height", 5)
                .attr("width", drag_width)
                .attr('fill', '#C0C0C0');

g.append("circle")
    .attr("r", 20)
    .attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; })
    .attr("fill", "#2394F5")
    .call(drag);

function dragMove(d) {
    var cx = Math.max(0, Math.min(drag_width, d3.event.x))
    d3.select(this)
        .attr("opacity", 0.6)
        .attr("cx", cx )
        .attr("cy", 20);
    console.log(cx, siNotation(dragScale(cx)));
}

function dragEnd() {
    d3.select(this)
        .attr('opacity', 1)
}