JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<div id='item-container'></div>

CSS

.component-caption {
      font: 14px sans-serif;
      font-weight: bold;
  }
  .axis text {
    font: 10px sans-serif;
  }
  .axis path,
  .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
  }
  .overlay {
    fill: none;
    pointer-events: all;
  }
  .focus {
      display: none;
  }
  .focus rect {
      fill: #f7f7f7;
      stroke: gray;
      stroke-width: 0.3px;
  }
  .line {
    fill: none;
    stroke-width: 1.5px;
  }
  .label {
      font: 10px sans-serif;
      font-weight: normal;
  }
  .bar {
      opacity: 0.3;
  }
  path.profit {
    stroke: steelblue;
    fill: none;
  }
  path.sales {
     stroke: tomato;
     fill: none;
  }
  .profit {
      fill: steelblue;
  }
  .sales {
      fill: tomato;
  }
  .expense {
      fill: orange;
  }

JavaScript

var data = [
      { date: new Date('2013/7/1'), profit: 15, sales: 96 },
      { date: new Date('2013/8/1'), profit: 10, sales: 45 },
      { date: new Date('2013/9/1'), profit: 32, sales: 130 },
      { date: new Date('2013/10/1'), profit: 17, sales: 47 },
      { date: new Date('2013/11/1'), profit: 22, sales: 55 },
      { date: new Date('2013/12/1'), profit: 40, sales: 157 },
      { date: new Date('2014/1/1'), profit: 1, sales: 23 },
      { date: new Date('2014/2/1'), profit: 3, sales: 32 },
      { date: new Date('2014/3/1'), profit: 7, sales: 40 },
      { date: new Date('2014/4/1'), profit: 2, sales: 32 },
      { date: new Date('2014/5/1'), profit: 8, sales: 28 },
      { date: new Date('2014/6/1'), profit: 9, sales: 40 }
  ];

  var margin = { top: 50, right: 100, bottom: 40, left: 40}
      , width = 800 - margin.left - margin.right
      , height = 300 - margin.top - margin.bottom
      , svg = d3.select('#item-container').append('div').append('svg')
                  .attr('width', width + margin.left + margin.right)
                  .attr('height', height + margin.top + margin.bottom)
                  .append('g')
                  .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

  // caption
  svg.append('text')
      .attr('class', 'component-caption')
      .attr('text-anchor', 'middle')
      .attr('transform', 'translate(10, -' + (margin.top - 20) + ')')
      .text('営業概要');


  // axis
  // x軸は日付。y軸にくっつけたくなかったので30からはじめている
  var x = d3.time.scale().nice()
              .domain(d3.extent(data, function (d) { return d.date; }))
              .range([30, width]);
  var yearMonthFormat = d3.time.format("%Y/%m");
  var xAxis = d3.svg.axis().scale(x)
                  .orient('bottom')
                  .tickFormat(yearMonthFormat);
  svg.append('g')
      .attr('class', 'x axis')
      .attr('transform', 'translate(0, ' + height + ')')
      .call(xAxis);

  svg.selectAll(".x text")
       .attr("transform", function (d)...