X和Y軸的繪圖日期

Question

我無法在我的圖表上獲取數據點。兩個軸都是可縮放的，都是日期範圍。更具體地說，x軸是日期，y軸是小時。我想知道是否與我的JSON文件的格式與小時的東西，但我仍然不確定它爲什麼不繪製任何東西。我的JSON文件的一個例子是

data = [ 
{ "date" : "2013-21-02T00:00:00", 
    "vertical" : "2013-20-02T11:00:00" 
},...] 

下面是我的代碼：

//Define the min and max date 
    var mindate = new Date(2013,02,20), // TODO: clip date 
     maxdate = new Date(2013,02,26); 

//Define the range of hours for the yaxis. Uses military time. 
var ymindate = new Date(2013,02,20, 7), // TODO: clip date 
    ymaxdate = new Date(2013,02,20, 17); 

margin = { top: 20, right: 20, bottom: 20, left: 45}; 
width = 400 - margin.left - margin.right; 
height = 200 - margin.top - margin.bottom; 

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

var y = d3.time.scale() 
    .domain([ymindate, ymaxdate]) 
    .range([height, 0]); 

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

var zoom = d3.behavior.zoom() 
    .x(x) 
    .y(y) 
    .on("zoom", zoomed); 

svg = d3.select('#chart') 
    .append("svg:svg") 
    .attr('width', width + margin.left + margin.right) 
    .attr('height', height + margin.top + margin.bottom) 
    .call(zoom) 
    .append("svg:g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

var make_x_axis = function() { 
    return d3.svg.axis() 
     .scale(x) 
     .orient("bottom") 
     .ticks(5); 
}; 

var make_y_axis = function() { 
    return d3.svg.axis() 
     .scale(y) 
     .orient("left") 
     .ticks(5); 
}; 

var xAxis = d3.svg.axis() 
    .scale(x) 
    .orient("bottom") 
    .ticks(5); 

svg.append("svg:g") 
    .attr("class", "x axis") 
    .attr("transform", "translate(0, " + height + ")") 
    .call(xAxis); 

var yAxis = d3.svg.axis() 
    .scale(y) 
    .orient("left") 
    .ticks(5); 

svg.append("g") 
    .attr("class", "y axis") 
    .call(yAxis); 

svg.append("g") 
    .attr("class", "x grid") 
    .attr("transform", "translate(0," + height + ")") 
    .call(make_x_axis() 
    .tickSize(-height, 0, 0) 
    .tickFormat("")); 

svg.append("g") 
    .attr("class", "y grid") 
    .call(make_y_axis() 
    .tickSize(-width, 0, 0) 
    .tickFormat("")); 

var clip = svg.append("svg:clipPath") 
    .attr("id", "clip") 
    .append("svg:rect") 
    .attr("x", 0) 
    .attr("y", 0) 
    .attr("width", width) 
    .attr("height", height); 

var chartBody = svg.append("g") 
    .attr("clip-path", "url(#clip)"); 

chartBody.append("svg:path") 
    .datum(data) 
    .attr("class", "line") 
    .attr("d", line); 

function zoomed() { 
    svg.select(".x.axis").call(xAxis); 
    svg.select(".y.axis").call(yAxis); 
    svg.select(".x.grid") 
     .call(make_x_axis() 
     .tickSize(-height, 0, 0) 
     .tickFormat("")); 
    svg.select(".y.grid") 
     .call(make_y_axis() 
     .tickSize(-width, 0, 0) 
     .tickFormat("")); 
    svg.select(".line") 
     .attr("class", "line") 
     .attr("d", line); 
    } 
} 

任何幫助，將不勝感激！謝謝！

Answer 1

您需要做的第一件事就是將您的數據解析爲D3認可的格式。因此，像：

var parseDate = d3.time.format("%Y-%d-%mT%H:%M:%S").parse; //Note the T in the middle 

data.forEach(function (d,i) { 
    d.date = parseDate(d.date); 
    d.vertical= parseDate(d.vertical); 
}) 

從那裏只是把它扔在該行的功能和我認爲它都應該工作了。哦，API參考對此很有幫助，其中是here。

我剛通過改變值到垂直幷包括最終閉合支架（糟糕）編輯上面的代碼塊。

接下來的事情是線發生器被設置爲只返回日期或垂直價值，因此需要將其改爲：

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

注意列入x(...)和y(...)的。

下面是從d3.js文件到工作fiddle