D3 Time Scale with Axis Component

by aybalasubramanian

HTML

<script src="http://d3js.org/d3.v2.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js"></script>

CSS

.chart {
    font-family: Arial, sans-serif;
    font-size: 10px;
  }

  .axis path, .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
  }

  .bar {
    fill: #86BC25;
  }

JavaScript

var data = [{"date":"2018-01-10","total":3},{"date":"2018-01-11","total":8},{"date":"2018-01-12","total":2},{"date":"2018-01-13","total":10},{"date":"2018-01-15","total":3},{"date":"2018-01-16","total":20},{"date":"2018-01-17","total":12}];

var margin = {top: 40, right: 40, bottom: 40, left:40},
    width = 600,
    height = 200;

var x = d3.time.scale()
    .domain([new Date(data[0].date), d3.time.day.offset(new Date(data[data.length - 1].date), 1)])
    .rangeRound([0, width - margin.left - margin.right]);

var y = d3.scale.linear()
    .domain([0, d3.max(data, function(d) { return d.total; })])
    .range([height - margin.top - margin.bottom, 0]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient('bottom')
    .ticks(d3.time.days, 1)
    .tickFormat(d3.time.format('%a %d'))
    .tickSize(0)
    .tickPadding(8);

var yAxis = d3.svg.axis()
    .scale(y)
    .orient('left')
    .tickPadding(8);

var svg = d3.select('body').append('svg')
    .attr('class', 'chart')
    .attr('width', width)
    .attr('height', height)
  .append('g')
    .attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');

svg.selectAll('.chart')
    .data(data)
  .enter().append('rect')
    .attr('class', 'bar')
    .attr('x', function(d) { return x(new Date(d.date)); })
    .attr('y', function(d) { return height - margin.top - margin.bottom - (height - margin.top - margin.bottom - y(d.total)) })
    .attr('width', 20)
    .attr('height', function(d) { return height - margin.top - margin.bottom - y(d.total) });

svg.append('g')
    .attr('class', 'x axis')
    .attr('transform', 'translate(0, ' + (height - margin.top - margin.bottom) + ')')
    .call(xAxis);

svg.append('g')
  .attr('class', 'y axis')
  .call(yAxis);
  
  var today = new Date();
var dd = today.getDate();    //<<===== no need
var mm = today.getMonth()+1; //January is 0!   //<<===== no need
var yyyy = today.getFullYear();  //<<===== no need


svg.append("line")
.attr("x1", x(today))  //<<== change your code...