D3 Examples - JavaScript Horizontal Scroll + Drag

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    
    /* width */
    ::-webkit-scrollbar {
        width: 8px;
          height:8px;
    }
​
    /* Track */
    ::-webkit-scrollbar-track {
        box-shadow: inset 0 0 3px rgb(145,145,145); 
        border-radius: 10px;
    }
​
    /* Handle */
    ::-webkit-scrollbar-thumb {
        background: rgb(0,130,101); 
        border:1px solid black;
          border-radius: 10px;
    }
​
    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #b30000; 
    }
    
    #container { 
            height:auto;
        padding-bottom:5px;
        width:800px;
          display:block;
        overflow-x:scroll;
          overflow-y:hidden;
        white-space: nowrap;
    }
     
    
     #controls { 
            height:25px;
        margin-top:10px;
        margin-left:10px;
    }
        
    select{
      width:300px;
    }
    
    .indicatorDivs{
      display:table;
      cursor: grab;
    }
    
  </style>
</head>
<body>
<div id="controls">
</div>
<div id="container"> 
</div>
<script>
    
    var indicators = ["a","b","c","d","e","f","g","h","i"]
​
    d3.select("#container")
      .call(d3.zoom().scaleExtent([0,1])
            .interpolate(d3.interpolateLinear)
            .on("zoom", zoomed))
        
    
    var divs = d3.select("#container").selectAll(".indicatorDivs").data(indicators)
    
    divs.enter()
      .append("div")
        .attr("class","indicatorDivs")
        .style("display","inline-block")
      .style("width", 150 + "px")
      .style("height", 150 + "px")
        .style("border","1px solid black")
      .call(d3.drag().on("start", dragstarted)
            .on("drag", dragged)
        .on("end", dragended));
​
​
​
    var headers =d3.selectAll(".indicatorDivs").selectAll(".headers").data(function(d){return [d]})
    headers.enter()
      .append("h2")
        .attr("class","headers")
        .style("color","black")
        .style("margin-left","20px")
      .text(function(d){return d}) 
        
    var x0 = 0
    var x1 = 0
    var deltax = 0
    var scroll0 = 0;
    var maxScroll = d3.select("#container").node().scrollWidth
    
    function dragstarted(){
      //get initial x position
      x0 = d3.event.x
      scroll0 = d3.select("#container").node().scrollLeft
    }
​
    function dragged(d) {
      //calculate change in x, and the associated change in scrolling
        x1 = d3.event.x
      deltax = x1-x0;
      
      //move scroller to starting scroll value + change in x
      //the Math.min is probably unneccesary since it will automatically
      //stop the scroller at the end of the div
      d3.select("#container").property("scrollLeft",Math.min(scroll0 + deltax,maxScroll))
    }
​
    function dragended(d) {
      d3.select(this).classed("active", false);
    }
​
    function zoomed(){
//          console.log(d3.event)
          
        d3.select("#container").property("scrollLeft",maxScroll*(1-d3.event.transform.k))
        
    }
    
  </script>
</body>
    