JSFiddle - React, Tailwind, and code Playground

by hijiangtao

CSS

svg, g {
  pointer-events: all;
}
.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.title {
  text-anchor: middle;
  font-weight: 700;
}


/*.x.axis path {
  display: none;
}*/

.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}

.linecircle {
  fill: green;
}
.linecircle:hover {
  fill: steelblue;
}
.flag {
  stroke: gray;
  stroke-dasharray: 5;
  stroke-width: 1.5;
  display: none;
  pointer-events: none;
}
.tips {
  pointer-events: none;
  display: none;
}
.tips-border {
  fill: #F3E4E4;
  stroke: gray;        
  stroke-width: 2;
}
.grid .tick {
  stroke: lightgrey;
  opacity: 0.7;
}
.grid path {
  stroke-width: 0;
}

JavaScript

;(function() {
  'use strict';

  var data = Array.apply(0, Array(31)).map(function(item, i) {
    i++;
    return {date: '2013-12-' + (i < 10 ? '0' + i : i), pv: parseInt(Math.random() * 100)}
  });

  // 定义circle的半径
  var r0 = 5,
    r1 = 8;

  // 定义动画持续时间
  var duration = 500;

  var margin = {top: 20, right: 20, bottom: 30, left: 50},
    width = document.body.clientWidth - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

  var parseDate = d3.time.format('%Y-%m-%d').parse;

  var x = d3.time.scale()
    // .domain([0, 100])
    .range([0, width]);

  var y = d3.scale.linear()
    // .domain([0, 100])
    .range([height, 0]);

  var xAxis = d3.svg.axis()
    .scale(x)
    .orient('bottom')
    // .tickFormat(function(d, i) {
    //   // return [d.getFullYear(), d.getMonth() + 1, d.getDate()].join('-');
    //   // return [d.getMonth() + 1, d.getDate()].join('-');
    //   var date = d.getDate();
    //   return date < 10 ? '0' + date : date;
    // })
    // 相同的效果
    .tickFormat(d3.time.format('%d'))
    .ticks(30);

  var yAxis = d3.svg.axis()
    .scale(y)
    .orient('left')
    .ticks(10);

  var xGridAxis = d3.svg.axis()
    .scale(x)
    .orient('bottom');

  var yGridAxis = d3.svg.axis()
    .scale(y)
    .orient('left');

  var line = d3.svg.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.pv); })
    .interpolate('monotone');

  var flagLine = d3.svg.line()
    .x(function(d) { return x(d.x); })
    .y(function(d) { return y(d.y); });

  var container = d3.select('body')
    .append('svg')
    // .transition()
    .attr('width', width + margin.left + margin.right)
    .attr('height', height + margin.top + margin.bottom);

  var svg;

  show();
  function show() {

    svg = container.append('g')
    .attr('class', 'content')
    .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

    function draw() {
      data.forEach(function(d) {
        d.dayText = d.date;
       ...