根据http://bl.ocks.org/mbostock/3883245上的演示
我不知道如何在 xAxis 上格式化时间
这是我的代码:js:
变量数据 = [{ "creat_time": "2013-03-12 15:09:04", “记录状态”:“好的”, "roundTripTime": "16" }, { "creat_time": "2013-03-12 14:59:06", “记录状态”:“好的”, “往返时间”:“0” }, { "creat_time": "2013-03-12 14:49:04", “记录状态”:“好的”, “往返时间”:“297” }, { "creat_time": "2013-03-12 14:39:06", “记录状态”:“好的”, “往返时间”:“31” },{ "creat_time": "2013-03-12 14:29:03", “记录状态”:“好的”, “往返时间”:“0” }]; var margin = {上:20,右:20,下:30,左:50}; var 宽度 = 960 - margin.left - margin.right; var height = 500 - margin.top - margin.bottom; var parseDate = d3.time.format("%Y-%m-%d %H:%M:%S").parse; var x = d3.time.scale() .range([0, 宽度]); var y = d3.scale.linear() .range([高度, 0]); var xAxis = d3.svg.axis() .scale(x) .orient("底部"); var yAxis = d3.svg.axis() .scale(y) .orient("左"); var line = d3.svg.line() .x(函数(d){返回x(d.creat_time);}) .y(function(d) { return y(d.roundTripTime); }); var svg = d3.select("body").append("svg") .attr("宽度", width + margin.left + margin.right) .attr("高度", 高度 + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); data.forEach(函数(d){ d.creat_time = parseDate(d.creat_time); d.roundTripTime = +d.roundTripTime; }); x.domain(d3.extent(data, function(d) { return d.creat_time; })); y.domain(d3.extent(data, function(d) { return d.roundTripTime;})); svg.append("g") .attr("类", "x 轴") .attr("变换", "翻译(0," + 高度 + ")") .call(xAxis); svg.append("g") .attr("类", "y 轴") .call(yAxis) .append("文本") .attr("变换", "旋转(-90)") .attr("y", 6) .attr("dy", ".71em") .style("文本锚", "结束") .text("返回时间(ms)"); svg.append("路径") .datum(数据) .attr("类", "行") .attr("d", 行);
这是svg:
在 svg 中,时间是 12 小时制,但在我的数据中,时间是 24 小时制。如何在 svg 和数据上保持相同的格式?
任何帮助表示赞赏。(ps:我希望你不要介意我的英语,它太糟糕了。)