D3 timeScale v4.0.0-alpha.40

HTML

<!DOCTYPE html>
<body>
<script src="//npmcdn.com/[email protected]/build/d3.min.js"></script>
<h3>TimeScale on [email protected]</h3>
Resources:
<ul>
  <li>https://github.com/d3/d3/wiki/Time-Scales#ticks</li>
  <li>https://github.com/d3/d3/wiki/Time-Formatting</li>
</ul>

CSS

* {
  font-family: sans-serif;
}
svg {
  font: 10px sans-serif;
}
.line {
  fill: none;
  stroke: #000;
  stroke-width: 1.5px;
}
.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

Babel + JSX

console.clear();

// Setup svg
var	margin = {top: 20, right: 20, bottom: 20, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom,
		totalWidth = width + margin.left + margin.right,
		totalHeight = height + margin.top + margin.bottom;
    
var svg = d3
	.select("body")
	.append("svg")
    .attr("width", totalWidth)
    .attr("height", totalHeight)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

const DAY = 24*3600*1000
let length = 10;
let data = Array
	.from({length}, (e,i)=>i*DAY)
	.map(v=>new Date(v))
  
let x = d3
		.scaleTime()
		.range([0, totalWidth])
    .domain(d3.extent(data));

let xAxis = d3
	.axisBottom(x)
  .ticks(d3.timeDay, 1)
  .tickFormat(d3.timeFormat("%a %d"))

svg.call(xAxis);