d3.js 두 축에 시간이있는 꺾은 선형 차트

Question

x 축을 따라 날짜가 있고 y 축에 분과 초가있는 꺾은 선형 차트를 플로팅하려고합니다.

축은 모두 괜찮지 만 선 그래프를 그릴 때 예상대로 표시되지 않습니다.

축을 따라 선으로 끝납니다.

여기 내 js 코드입니다.

/** 
* Function for sorting times 
*/ 
function numOrdA(a, b){ return (a[1]-b[1]); } 

/** 
* Array of timestamps and times in seconds 
*/ 
var data = [ 
    [1395237411, 130], 
    [1395950916, 90], 
    [1397557328, 95], 
    [1398353666, 87] 
]; 

/** 
* Sort the data by the time in seconds 
*/ 
data.sort(numOrdA); 

var width = 700, 
    height = 400, 
    padding = 100; 

/** 
* Create an svg container 
*/ 
var vis = d3.select("body"). 
    append("svg:svg") 
    .attr("width", width) 
    .attr("height", height); 

/** 
* Create min and max dates for x axis 
*/ 
var mindate = new Date, 
    maxdate = new Date; 

mindate.setTime(data[0][0] * 1000); 
maxdate.setTime(data[data.length - 1][0] * 1000); 

/** 
* Create min and max times for y axis 
*/ 
var mintime = new Date, 
    maxtime = new Date; 

mintime.setTime(data[0][1] * 1000); 
maxtime.setTime(data[data.length - 1][1] * 1000); 

/** 
* Create y scale using min and max times 
*/ 
var yScale = d3.time.scale() 
    .domain([mintime, maxtime]) 
    .range([height - padding, padding]); 

/** 
* Create x scale with min and max dates 
*/ 
var xScale = d3.time.scale() 
    .domain([mindate, maxdate]) 
    .range([padding, width - padding * 2]); 

/** 
* Create the y axis with time in minutes and seconds 
*/ 
var yAxis = d3.svg.axis() 
    .orient("left") 
    .scale(yScale) 
    .tickFormat(d3.time.format("%M:%S")); 

/** 
* Create the x axis with a date format 
*/ 
var xAxis = d3.svg.axis() 
    .orient("bottom") 
    .scale(xScale) 
    .tickFormat(d3.time.format("%a %x")); 

/** 
* Append y axis 
*/ 
vis.append("g") 
    .attr("transform", "translate("+padding+",0)") 
    .call(yAxis); 

/** 
* Append the x axis 
*/ 
vis.append("g") 
    .attr("class", "xaxis") 
    .attr("transform", "translate(0," + (height - padding) + ")") 
    .call(xAxis); 

/** 
* Rotate the text on the x axis 
*/ 
vis.selectAll(".xaxis text") 
    .attr("transform", function(d) { 
     return "translate(" + this.getBBox().height*-2 + "," + this.getBBox().height + ")rotate(-45)"; 
    }); 

/** 
* Line function to plot the times (y axis) against dates (x axis) 
*/ 
var line = d3.svg.line() 
     .x(function(d) { 
      return xScale(d[1]); 
     }) 
     .y(function(d) { 
      return yScale(d[0]); 
     }); 

/** 
* Add the path to the svg 
*/ 
vis.append("svg:path").attr("d", line(data)); 

여기에 도움이 주요 문제의

Answer 1

한 시간이 라인 함수에서 객체로 데이터를 플로팅되지 않았습니다에 대한 the current code on jsfiddle

감사합니다.

꺾은 선형 차트를 그렸던이 튜토리얼 http://www.sitepoint.com/creating-simple-line-bar-charts-using-d3-js/을 발견했습니다.

그런 다음 모든 것을 시간 기반으로 변환하는 방법을 알아 냈습니다.

나는 final code on Codepen을 게시했습니다.