2016.11.21_how_to_place_date_to_the_tooltip

by Maria Karanasou

HTML

<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<div id="tooltip" class="hidden">
  <p><strong><span id="label">month</span></strong></p>
  <p><span id="value">100</span></p>
</div>

CSS

html, body {
  		height: 350px;
  		width: 604px;
  		padding: 0px;
  		margin: 0px;
	}

      
      .axis path,
			.axis line {
				fill: none;
				/* stroke: black; */
				shape-rendering: crispEdges;
			}
			
			.axis text {
				font-family: sans-serif;
				font-size: 11px;
			}
      
      #tooltip {
				position: absolute;
				width: 120px;
				height: auto;
				padding: 10px;
				background-color: white;
				-webkit-border-radius: 10px;
				-moz-border-radius: 10px;
				border-radius: 10px;
				-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
				-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
				box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
				pointer-events: none;
			}
			
			#tooltip.hidden {
				display: none;
			}
			
			#tooltip p {
				margin: 0;
				font-family: sans-serif;
				font-size: 16px;
				line-height: 20px;
			}

JavaScript

var dataset = [681, 602, 613, 648, 654, 669, 688, 701, 697, 686, 684, 675, 742, 655, 662, 709, 709, 718, 739, 746, 750, 733, 740];
    
    var w = 604;
    var h = 320;
    var bottomPadding = 40;
    var topPadding = 10;
    var barPadding = 5;
    var barWidth = d3.round(w / dataset.length);

    var ru_BY = {
      "decimal": ",",
      "thousands": "\xa0",
      "grouping": [3],
      "currency": ["", " Br"],
      "dateTime": "%A, %e %B %Y г. %X",
      "date": "%d.%m.%Y",
      "time": "%H:%M:%S",
      "periods": ["AM", "PM"],
      "days": ["воскресенье", "понедельник", "вторник", "среда", "четверг", "пятница", "суббота"],
      "shortDays": ["вс", "пн", "вт", "ср", "чт", "пт", "сб"],
      "months": ["Январь", "Февраль", "Март", "Апрель", "Май", "Июнь", "Июль", "Август", "Сентябрь", "Октябрь", "Ноябрь", "Декабрь"],
      "shortMonths": ["янв", "фев", "мар", "апр", "май", "июн", "июл", "авг", "сен", "окт", "ноя", "дек"]
    };

    var RU = d3.locale(ru_BY);
    var yScale = d3.scale.linear()
               .domain([0, d3.max(dataset)])
               .rangeRound([bottomPadding, h - 2*topPadding - bottomPadding]);

    var minDate = new Date(2014, 11, 1),
      maxDate = new Date(2016, 9, 1);

    var xScale = d3.time.scale()
             .domain([minDate, maxDate])
             .range([(barWidth - barPadding) / 2, barWidth * (dataset.length - 1) + (barWidth - barPadding) / 2]);

    var xAxis = d3.svg.axis()
              .scale(xScale)
              .orient("bottom")
              .ticks(d3.time.months, 2)
              .tickSize(0)
              //.tickSize(16, 0)
              .tickFormat(RU.timeFormat("%b %Y"));
    
    var svg = d3.select("body")
          .append("svg")
          .attr("width", w)
          .attr("height", h);
    
    svg.selectAll("rect")
      .data(dataset)
      .enter()
      .append("rect")
      .attr("x", function(d, i) {
          return i * barWidth;
      })
      .attr("y", function(d) {
        return h - yScale(d)...