JSFiddle - React, Tailwind, and code Playground

by helxsz

JavaScript

var width = 400, height = 100, interpolation = "basis";
var now = new Date();
var y = now.getFullYear(), m = now.getMonth(), d = now.getDate();
var data = [{t:new Date(y,m,d,0),v:1},
            {t:new Date(y,m,d,1),v:4},
            {t:new Date(y,m,d,3),v:2},
            {t:new Date(y,m,d,5),v:5}            
           ]；

var vis = d3.select("#monthlyGraph").append("svg").attr("width", width).attr("height", height);

var dayDataLayer = vis.append('g').attr('id','dayDataLayer');
    .duration(280);



var power = d3.scale.linear().domain( [0, d3.max(data, function(d) { return d.v; })] ).rangeRound([0, height]);;		

var dayScale = d3.time.scale().domain([ new Date( y,m,d,0)
	                                      , new Date( y,m,d,24)
										  ])
	                              .range([-5, width]);

console.log('-------------------------------------------',data);
var dayly = dayDataLayer.selectAll('.line').data[data];
	
dayly.exit().remove();
dayly.enter()
    .append("path")
    .attr('class','line')
    .attr('d',day_timeline)
    .style("fill",function(){ return "#75B8C1" })
    .transition()
    .ease("linear")