How do I make my line x-axis based on date in d3.js?

I am attempting to teach myself how to use d3.js. I've been looking at the examples that come with it and have been attempting to recreate the line graph using json delivered data. I'm able to feed the data into the line graph, but the x-axis is supposed to be a date instead of a number. The date format that I'm using is MM/DD/YY, but the graph plots everything at 0. My json data is coming across fine, but I'm having trouble figuring out how to plot the x coordinates. This was taken straight from the line.js that comes in the d3.js examples folder when downloaded. The date portion doesn't do the trick. I'm hoping someone can point me to an example or be able to explain how I can make it work.

d3.json('jsonChartData.action',
  function (data) {
    console.log(data);

    var w = 450,
    h = 275,
    p = 30,
    x = d3.scale.linear().domain([0, 100]).range([0, w]),
    y = d3.scale.linear().domain([0, 100]).range([h, 0]);

    var vis = d3.select("body")
    .data([data])
    .append("svg:svg")
    .attr("width", w + p * 2)
    .attr("height", h + p * 2)
    .append("svg:g")
    .attr("transform", "translate(" + p + "," + p + ")");

    var rules = vis.selectAll("g.rule")
    .data(x.ticks(5))
    .enter().append("svg:g")
    .attr("class", "rule");

    rules.append("svg:line")
    .attr("x1", x)
    .attr("x2", x)
    .attr("y1", 0)
    .attr("y2", h - 1);

    rules.append("svg:line")
    .attr("class", function(d) { return d ? null : "axis"; })
    .attr("y1", y)
    .attr("y2", y)
    .attr("x1", 0)
    .attr("x2", w + 1);

    rules.append("svg:text")
    .attr("x", x)
    .attr("y", h + 3)
    .attr("dy", ".71em")
    .attr("text-anchor", "middle")
    .text(x.tickFormat(10));

    rules.append("svg:text")
    .attr("y", y)
    .attr("x", -3)
    .attr("dy", ".35em")
    .attr("text-anchor", "end")
    .text(y.tickFormat(10));

    vis.append("svg:path")
    .attr("class", "line")
    .attr("d", d3.svg.line()
    .x(function(d) { return x(d3.time.days(new Date(d.jsonDate))); })
    .y(function(d) { return y(d.jsonHitCount); }));

    vis.selectAll("circle.line")
    .data(data)
    .enter().append("svg:circle")
    .attr("class", "line")
    .attr("cx", function(d) { return x(d3.time.days(new Date(d.jsonDate))); })
    .attr("cy", function(d) { return y(d.jsonHitCount); })
    .attr("r", 3.5);
  });

JSON as printed out by my action:

[{"jsonDate":"09\/22\/11","jsonHitCount":2,"seriesKey":"Website Usage"},`{"jsonDate":"09\/26\/11","jsonHitCount":9,"seriesKey":"Website Usage"},{"jsonDate":"09\/27\/11","jsonHitCount":9,"seriesKey":"Website Usage"},{"jsonDate":"09\/29\/11","jsonHitCount":26,"seriesKey":"Website Usage"},{"jsonDate":"09\/30\/11","jsonHitCount":2,"seriesKey":"Website Usage"},{"jsonDate":"10\/03\/11","jsonHitCount":3,"seriesKey":"Website Usage"},{"jsonDate":"10\/06\/11","jsonHitCount":2,"seriesKey":"Website Usage"},{"jsonDate":"10\/11\/11","jsonHitCount":2,"seriesKey":"Website Usage"},{"jsonDate":"10\/12\/11","jsonHitCount":2,"seriesKey":"Website Usage"},{"jsonDate":"10\/13\/11","jsonHitCount":1,"seriesKey":"Website Usage"},{"jsonDate":"10\/14\/11","jsonHitCount":5,"seriesKey":"Website Usage"},{"jsonDate":"10\/17\/11","jsonHitCount":2,"seriesKey":"Website Usage"},{"jsonDate":"10\/18\/11","jsonHitCount":6,"seriesKey":"Website Usage"},{"jsonDate":"10\/19\/11","jsonHitCount":8,"seriesKey":"Website Usage"},{"jsonDate":"10\/20\/11","jsonHitCount":2,"seriesKey":"Website Usage"},{"jsonDate":"10\/21\/11","jsonHitCount":4,"seriesKey":"Website Usage"},{"jsonDate":"10\/24\/11","jsonHitCount":1,"seriesKey":"Website Usage"},{"jsonDate":"10\/25\/11","jsonHitCount":1,"seriesKey":"Website Usage"},{"jsonDate":"10\/27\/11","jsonHitCount":3,"seriesKey":"Website Usage"},{"jsonDate":"11\/01\/11","jsonHitCount":2,"seriesKey":"Website Usage"},{"jsonDate":"11\/02\/11","jsonHitCount":1,"seriesKey":"Website Usage"},{"jsonDate":"11\/03\/11","jsonHitCount":2,"seriesKey":"Website Usage"},{"jsonDate":"11\/04\/11","jsonHitCount":37,"seriesKey":"Website Usage"},{"jsonDate":"11\/08\/11","jsonHitCount":1,"seriesKey":"Website Usage"},{"jsonDate":"11\/10\/11","jsonHitCount":39,"seriesKey":"Website Usage"},{"jsonDate":"11\/11\/11","jsonHitCount":1,"seriesKey":"Website Usage"},{"jsonDate":"11\/14\/11","jsonHitCount":15,"seriesKey":"Website Usage"},{"jsonDate":"11\/15\/11","jsonHitCount":2,"seriesKey":"Website Usage"},{"jsonDate":"11\/16\/11","jsonHitCount":5,"seriesKey":"Website Usage"},{"jsonDate":"11\/17\/11","jsonHitCount":4,"seriesKey":"Website Usage"},{"jsonDate":"11\/21\/11","jsonHitCount":2,"seriesKey":"Website Usage"},{"jsonDate":"11\/22\/11","jsonHitCount":3,"seriesKey":"Website Usage"},{"jsonDate":"11\/23\/11","jsonHitCount":11,"seriesKey":"Website Usage"},{"jsonDate":"11\/24\/11","jsonHitCount":2,"seriesKey":"Website Usage"},{"jsonDate":"11\/25\/11","jsonHitCount":1,"seriesKey":"Website Usage"},{"jsonDate":"11\/28\/11","jsonHitCount":10,"seriesKey":"Website Usage"},{"jsonDate":"11\/29\/11","jsonHitCount":3,"seriesKey":"Website Usage"}]`

推荐答案

你试图用d3.scale.linear()来表示约会,但这行不通.您需要使用d3.time.scale()(docs):

// helper function
function getDate(d) {
    return new Date(d.jsonDate);
}

// get max and min dates - this assumes data is sorted
var minDate = getDate(data[0]),
    maxDate = getDate(data[data.length-1]);

var x = d3.time.scale().domain([minDate, maxDate]).range([0, w]);

然后,您不需要处理时间间隔函数,您只需传递x个日期即可:

.attr("d", d3.svg.line()
    .x(function(d) { return x(getDate(d)) })
    .y(function(d) { return y(d.jsonHitCount) })
);

Working fiddle here: http://jsfiddle.net/nrabinowitz/JTrnC/

Json相关问答推荐

如何在数组抖动中按值分组

如何在JQ过滤器文件中使用多行?

简单条形图和有序分类中条形图的 colored颜色 梯度

如何在Android中解析带有动态键和可变对象名称的改装JSON响应?

Android 如何判断小时时间是否在两个时间之间?

Bicep脚本中如何设置弹性池的维护窗口?

具有 (RegEx) 模式的 json-schema 中的枚举

JSONPath:查找子项目条件在字符串列表中的项目

根据数据框中的其他列值将列表 json 对象插入行

N1QL 聚合查询 Couchbase

在PowerShell中按时间戳过滤JSON

如何使用 LINQ 在 C# 中重构对象?

缺少所需的请求正文内容:org.springframework.web.method.HandlerMethod$HandlerMethodParameter

将 js Array() 转换为 JSON 对象以用于 JQuery .ajax

没有很多类的 GSON 解析

Laravel5 Json 获取文件内容

如何通过 NSJSONSerialization 在 JSON 中包含空值?

JSON 模式 - 如果对象*不*包含特定属性则有效

如何在dart Flutter 中将json字符串转换为json对象?

使用 jQuery 和 JSON 填充表单?