Javascript X轴和Y轴绘图日期

我无法获取图表上的数据点。两个轴都是可缩放的，都是日期范围。更具体地说，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);
    }
}

---

任何帮助都将不胜感激！！！谢谢大家!

您需要做的第一件事是将数据解析为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参考在这方面很有帮助，在哪里呢

我刚刚编辑了上面的代码块，将value改为vertical，并包含了最后的结束括号（oops）

接下来，line generator被设置为只返回日期或垂直值，因此需要将其更改为：

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

注意包含了

x（…）

和

y（…）

---

这里有一个链接指向一个正在工作的

当我尝试你的建议时，我从d3.js文件中得到了错误。当y轴是整数，x轴是日期时，它工作。所以，我认为解析不是问题所在。当两个轴都是日期时，图形将不会打印。我对之前的帖子做了一些编辑，并对代码进行了一些清理，如图所示。您还需要查看上面讨论的线路生成器。