SimpleBrushAddCircle

by Simon Raper

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.12/d3.min.js"></script>

JavaScript

var margin = {
    top: 10,
    right: 10,
    bottom: 10,
    left: 10
  },
  width = 300 - margin.left - margin.right,
  height = 300 - margin.bottom - margin.top;

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 x = d3.scale.linear()
  .domain([0, 10])
  .range([0, width])
  .clamp(true);

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height / 2 + ")")
    .call(d3.svg.axis()
      .scale(x)
      .orient("bottom"));

var brush = d3.svg.brush()
  .x(x)
  .extent([0, 0])
  .on("brush", brushed);

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

var handle = svg.selectAll(".slider").append("circle")
    .attr("class", "handle")
    .attr("transform", "translate(0," + height / 2 + ")")
    .attr("r", 9);
    
function brushed() {
  var value = brush.extent()[0];

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

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