处理d3.js轴上的date

如何在d3.js中根据date生成我的行x轴？

我试图教自己如何使用d3.js 我一直在看它附带的例子，并试图用json交付的数据重新创build线图。 我能够将数据input到折线图中，但是x轴应该是date而不是数字。 我正在使用的date格式是MM / DD / YY，但graphics绘制所有的零。我的JSON数据是通过罚款，但我无法弄清楚如何绘制X坐标。 这是直接从下载的d3.js示例文件夹中的line.js中获取的。 date部分没有办法。 我希望有人能指点我一个例子，或者能够解释我如何使它工作。

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由我的行为打印出来：

 [{"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"}]` 

Answer 1

你正在尝试使用d3.scale.linear()作为date，这是行不通的。 你需要使用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的date即可：

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

在这里工作的小提琴： http : //jsfiddle.net/nrabinowitz/JTrnC/