JSFiddle - React, Tailwind, and code Playground

by HemalathaThanigaivel

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<div id="lineD3" style="width: 100%">

</div>
<button class="resetBtnD3">
Reset
</button>

CSS

/* .line {
  fill: none;
  stroke: steelblue;
  stroke-width: 2px;
} */
div.tooltip {	
    position: absolute;			
    text-align: center;			
    width: 60px;					
    height: 28px;					
    padding: 2px;				
    font: 12px sans-serif;		
    background: lightgreen;	
    border: 2px solid black;		
    border-radius: 8px;			
    pointer-events: none;
    
}

.legendSvg{
  width : 100%;
  height : 50;
 }

.grid line {
  stroke: lightgrey;
  stroke-opacity: 0.7;
  shape-rendering: crispEdges;
}

.resetBtnD3{
  opacity : 0;
  }

JavaScript

let check = [{
tempAvg
:
6.046808510638299,
consm1200010203769
:
489.732170784764,
consm1200021014748
:
230.89883446238804,
consm1200050073266
:
802.7459237597384,
consm1200061306364
:
5507.575047862716,
cost1200010203769
:
98.5571203322522,
cost1200021014748
:
71.73121922246231,
cost1200050073266
:
89.54172651258237,
cost1200061306364
:
618.6143846610813,
date
:
"2018/02/09"
},
{
tempAvg
:
16.046808510638299,
consm1200010203769:
703.6108916236388,
consm1200021014748
:
338.05989961645565,
consm1200050073266
:
600.0058100873945,
consm1200061306364
:
7424.357816768253,
cost1200010203769
:
118.90009373486092,
cost1200021014748
:
81.96131221292826,
cost1200050073266
:
108.43084168765246,
cost1200061306364
:
798.0288822217361,
date
:
"2018/02/10"
}];


// set the dimensions and margins of the graph
var margin = {top: 20, right: 70, bottom:50, left: 70},
    width = 700 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
// parse the date / time
var parseTime = d3.timeParse("%Y/%m/%d");
// set the ranges
var x = d3.scaleTime().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);
var y1 = d3.scaleLinear().range([height, 0]);
// define the line
var valueline = d3.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.consm1200021014748); });
// define the line
var valueline2 = d3.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.consm1200050073266); });
    
var templine = d3.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y1(d.tempAvg); });
  
// append the svg obgect to the body of the page
// appends a 'group' element to 'svg'
// moves the 'group' element to the top left margin
var brush = d3.brush().on("end", brushended),
idleTimeout,
    idleDelay = 350;
var svg = d3.select("#lineD3").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
   ...