D3.JS - 날짜 라인 그래프 그리기

💻코드

<div id="canvas-realtile-graph"><svg width="355" height="110"></svg></div>
<script> 	
			var n = 60;
			var dataGal=[];
		    //random = d3.randomNormal(0, .2),
		    //dataGal = [0.3639, 0.4862, 0.7588, 0.5905, 0.3522, 0.8548, 0.1268, 0.9583, 0.1176, 0.1361, 0.8377, 0.4384, 0.5754, 0.7842, 0.9094, 0.7698, 0.1691, 0.0518, 0.8581];
		    //dataGal = [5,10,15,20,25,30,35,40];
/* 			dataGal = [ 
							  { "x": 1558583546*1000,   "y": 0.3639},  
							  { "x": 1558583547*1000,  "y": 0.4862},
							  { "x": 1558583548*1000,  "y": 0.7588}, 
							  { "x": 1558583549*1000,  "y": 0.5905},
							  { "x": 1558583550*1000,  "y": 0.8548},  
							  { "x": 1558583551*1000, "y": 0.9583}
							]; */
			
			var svg = d3.select("svg"),
			    margin = {top: 20, right: 20, bottom: 20, left: 40},
			    width = +svg.attr("width") - margin.left - margin.right,
			    height = +svg.attr("height") - margin.top - margin.bottom,
			    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
			
			
			var abcd3 = (1558583546+60)*1000;
			var abcd2 = 1558583546*1000;
			
			var x = d3.scaleTime()
			    .domain([abcd2, abcd3])
			    .range([0, width]);
			
			var y = d3.scaleLinear()
			    .domain([0, 1])
			    .range([height, 0]);
			
			var line = d3.line()
			    .x(function(d) { return x(d.x); })
			    .y(function(d) { return y(d.y); });
			
			g.append("defs").append("clipPath")
			    .attr("id", "clip")
			  .append("rect")
			    .attr("width", width)
			    .attr("height", height);
			
			g.append("g")
			    .attr("class", "axis axis--x")
			    .attr("transform", "translate(0," + y(0) + ")")
			    .call(d3.axisBottom(x).ticks(3).tickFormat(d3.timeFormat("%M:%S")));
			
			g.append("g")
			    .attr("class", "axis axis--y")
			    .call(d3.axisLeft(y).ticks(5));
			
			g.append("g")
			    .attr("clip-path", "url(#clip)")
			  .append("path")
			    .datum(dataGal)
			    .attr("class", "line")
			  .transition()
			    .duration(1000)
			    .ease(d3.easeLinear)
			    .on("start", tick);
			
 			function tick() {
 				console.log("tick 조회")
			  /*var gal = { "x": 1558583552*1000, "y": 0.2590};*/
			  var gal = { "x": new Date().getTime(), "y": Math.floor(Math.random()*10000)/10000};
 				
			  dataGal.push(gal);
			  rescale();
			  
			  // Redraw the line.
			  d3.select(this)
			      .attr("d", line)
			      .attr("transform", null);

			  d3.active(this)
			      //.attr("transform", "translate(" + x(-1) + ",0)")
			    .transition()
			    .on("start", tick);

			  if(dataGal.length>=60){
				  dataGal.shift();
			  } 
			} 
			
			
			function rescale() {
			    
			    y.domain([0,1.0]);  // 스케일 바꾸기
			    x.domain([new Date().getTime()-60000,new Date().getTime()]);
			    
			    g.select(".axis--y").remove(); //스케일 라벨 지우기
			    g.select(".axis--x").remove(); 
				
			    g.append("g")
			    .attr("class", "axis axis--y")
			    .call(d3.axisLeft(y).ticks(6)); //스케일 라벨 그리기
			    
				g.append("g")
			    .attr("class", "axis axis--x")
			    .attr("transform", "translate(0," + y(0) + ")")
			    .call(d3.axisBottom(x).ticks(3).tickFormat(d3.timeFormat("%M:%S")));
			
			}
			
			
			
			function ParseToDate(d){
				return d.getHours()+":"+d.getMinutes()+":"+d.getSeconds();
			}

</script>