title: d3 - scaleTime by week
body: <p>I am working with d3 to recreate a chart in the web. I have a line chart working with proper scale on the y axis. I now need to be able to set the scale on the x axis which works with dates.</p>
  
  <p>What I want is to be able to print out the dates along with the week from the total similar to this example in excel:
  <a href="https://i.stack.imgur.com/IRmGu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IRmGu.png" alt="Excel example"></a></p>
  
  <p>Here is what I currently get:
  <a href="https://i.stack.imgur.com/aW1ng.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aW1ng.png" alt="d3 example"></a></p>
  
  <p>Here is my current class:</p>
  
  <p><strong><em>Chart.js</em></strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import moment from 'moment';
  import { scaleLinear, scaleTime } from 'd3-scale';
  import { max, extent } from 'd3-array';
  import { select } from 'd3-selection';
  import { line } from 'd3-shape';
  import { axisBottom, axisLeft } from 'd3-axis';
  
  import '../App.css';
  
  const margin = { top: 20, right: 20, bottom: 30, left: 50 };
  
  class Chart extends Component {
    componentDidMount = () =&gt; {
      this.createChart();
    }
  
    componentDidUpdate = () =&gt; {
      this.createChart();
    }
  
    createChart = () =&gt; {
      switch (this.props.type) {
        case 'bar': this.createBarChart(); break;
        case 'line-date': this.createDateLineChart(); break;
        default: break;
      }
    }
  
    createBarChart = () =&gt; {
      const node = this.node;
      const dataMax = max(this.props.data);
      const yScale = scaleLinear()
        .domain([0, dataMax])
        .range([0, this.props.size[1]]);
  
      select(node)
        .selectAll('rect')
        .data(this.props.data)
        .enter()
        .append('rect');
  
      select(node)
        .selectAll('rect')
        .data(this.props.data)
        .exit()
        .remove();
  
      select(node)
        .selectAll('rect')
        .data(this.props.data)
        .style('fill', '#fe9922')
        .attr('x', (d, i) =&gt; i * 25)
        .attr('y', d =&gt; this.props.size[1] - yScale(d))
        .attr('height', d =&gt; yScale(d))
        .attr('width', 25);
    }
  
    createDateLineChart = () =&gt; {
      const node = this.node;
      var svg = select(node);
  
      var width = +svg.attr('width') - margin.left - margin.right;
      var height = +svg.attr('height') - margin.top - margin.bottom;
  
      var g = svg.append('g').attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
  
  
      var x = scaleTime()
        .rangeRound([0, width]);
  
      var y = scaleLinear()
        .rangeRound([height, 0]);
  
      var d3Line = line()
        .x(function (d) { return x(d.date); })
        .y(function (d) { return y(d.number); });
  
      var data = [];
      for (var item of this.props.data) {
        data.push({
          date: moment(item.date, 'YYYY-MM-DD').toDate(),
          number: +item.number
        });
      }
  
      x.domain(this.props.xscale !== undefined ? this.props.xscale : extent(data, function (d) { return d.date; }));
      y.domain(this.props.yscale !== undefined ? this.props.yscale : extent(data, function (d) { return d.number; }));
  
      // X axis
      g.append('g')
        .call(axisLeft(y))
        // Set axis label
        .append('text')
        .attr('fill', '#000000')
        .attr('transform', 'rotate(-90)')
        .attr('transform-y', '-50%')
        .attr('y', -30) // Left
        .attr('x', (height / 2) * -1) // Down
        .attr('font-weight', 'bold')
        .attr('text-anchor', 'center')
        .text(this.props.labels.x);
  
      // Y axis
      g.append('g')
        .attr('transform', 'translate(0,' + height + ')')
        .call(axisBottom(x))
        // Removes axis line
        // .select('.domain')
        // .remove()
        // Set axis label
        .append('text')
        .attr('fill', '#000000')
        .attr('transform-x', '-50%')
        .attr('y', 30) // Down
        .attr('x', (width / 2)) // Left
        .attr('font-weight', 'bold')
        .attr('text-anchor', 'center')
        .text(this.props.labels.y);
  
      // Path / Line
      g.append('path')
        .datum(data)
        .attr('fill', 'none')
        .attr('stroke', 'steelblue')
        .attr('stroke-linejoin', 'round')
        .attr('stroke-linecap', 'round')
        .attr('stroke-width', 1.5)
        .attr('d', d3Line);
      // });
    }
  
    render() {
      return (
        &lt;svg ref={node =&gt; this.node = node}
          width={1280}
          height={720} /&gt;
      );
    }
  }
  
  export default Chart;
  </code></pre>
  
  <p>What do I need to do to make d3 set the scale so I can set the date to <code>W1 - 08/09/17</code> etc.?</p>