JSFiddle - React, Tailwind, and code Playground

by Shih Hsuan Wu

HTML

<script src="http://mbostock.github.io/d3/talk/20111018/d3/d3.time.js"></script>
<script src="https://mbostock.github.io/d3/talk/20111018/d3/d3.csv.js"></script>
<script src="https://mbostock.github.io/d3/talk/20111018/d3/d3.js"></script>
<body>
  <div id="container">
    This couldn't be simpler.
  </div>
</body>

CSS

svg {
  font-size: 10px;
}

g {
  overflow: visible;
}

text {
  z-index: 20;
}

rect.pane {
  cursor: move;
  fill: none;
  pointer-events: all;
}

JavaScript

var w = 500,
   h = 300,
   x = d3.time.scale().range([0, w]),
   xAxis = d3.svg.axis().scale(x).orient("bottom").tickSize(-h, 0).tickPadding(6);

 var svg = d3.select("body").append("svg:svg")
   .attr("width", w)
   .attr("height", h + 50)
   .append("svg:g");

 svg.append("svg:g")
   .attr("class", "x axis")
   .attr("transform", "translate(0," + h + ")");

 svg.append("svg:rect")
   .attr("class", "pane")
   .attr("width", w)
   .attr("height", h)
   .call(d3.behavior.zoom().on("zoom", zoom));

 x.domain([new Date(1999, 0, 1), new Date(2014, 0, 0)]);

 draw();

 function draw() {
   console.log("drawing");
   svg.select("g.x.axis").call(xAxis);
 }

 function zoom() {
   console.log("zooming");
   d3.event.transform(x); // TODO d3.behavior.zoom should support extents
   draw();
 }