D3 Examples - time slider demo

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
       
   .ticks {
  font: 10px sans-serif;
    }
​
    .track,
    .track-inset,
    .track-overlay {
      stroke-linecap: round;
    }
​
    .track {
      stroke: #000;
      stroke-opacity: 0.3;
      stroke-width: 10px;
    }
​
    .track-inset {
      stroke: #ddd;
      stroke-width: 8px;
    }
​
    .track-overlay {
      pointer-events: stroke;
      stroke-width: 50px;
      stroke: transparent;
      cursor: crosshair;
    }
​
    .handle {
      fill: #fff;
      stroke: #000;
      stroke-opacity: 0.5;
      stroke-width: 1.25px;
    }
    
  </style>
</head>
​
​
<body>
  <svg width="960" height="500"></svg>
  
  <script>
    
   formatDate = d3.timeFormat("%b %d");
    
   var svg = d3.select("svg"),
    margin = {right: 50, left: 50},
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height");
    
    // scale function
    var x = d3.scaleTime()
      .domain([new Date('2012-01-02'), new Date('2013-01-01')])
      .range([0, width])
      .clamp(true);
​
​
    // initial value
    var startValue = x(new Date('2012-03-20'));
    startingValue = new Date('2012-03-20');
    
​
   // var x = d3.scaleLinear()
     //   .domain([0, 180])
       // .range([0, width])
        //.clamp(true);
​
    var slider = svg.append("g")
        .attr("class", "slider")
        .attr("transform", "translate(" + margin.left + "," + (height-60) + ")");
​
    slider.append("line")
        .attr("class", "track")
        .attr("x1", x.range()[0])
        .attr("x2", x.range()[1])
      .select(function() { return this.parentNode.appendChild(this.cloneNode(true)); })
        .attr("class", "track-inset")
      .select(function() { return this.parentNode.appendChild(this.cloneNode(true)); })
        .attr("class", "track-overlay")
        .call(d3.drag()
            .on("start.interrupt", function() { slider.interrupt(); })
            .on("start drag", function() { updateData(x.invert(d3.event.x)); }));
​
    slider.insert("g", ".track-overlay")
        .attr("class", "ticks")
        .attr("transform", "translate(0," + 18 + ")")
      .selectAll("text")
      .data(x.ticks(10))
      .enter().append("text")
        .attr("x", x)
        .attr("text-anchor", "middle")
        .text(function(d) { return formatDate(d); });
​
    var handle = slider.insert("circle", ".track-overlay")
        .attr("class", "handle")
        .attr("r", 10);
​
    function updateData(h) 
    {
      console.log(formatDate(h))
      handle.attr("cx", x(h));
     
    }
​
  </script>
</body>
​
    