Question

我在这里有这个图表：

var data = [1, 4, 5, 4, 3, 6, 5, 8, 10, 0];
var date = ['2013-01-01 00:00:00', '2013-01-01 00:05:00', '2013-01-01 00:10:00', '2013-01-01 00:15:00', '2013-01-02 00:00:00', '2013-01-02 00:05:00', '2013-01-02 00:10:00', '2013-01-02 00:35:00', '2013-01-02 00:40:00', '2013-01-02 00:45:00'];

w = 400;
h = 200;
margin = 20;
y = d3.scale.linear().domain([0, d3.max(data)]).range([0 + margin, h - margin]);
x = d3.scale.linear().domain([0, data.length]).range([0 + margin, w - margin]);

var parseDate = d3.time.format("%Y-%m-%d %H:%M:%S").parse;

var vis = d3.select("body")
    .append("svg:svg")
    .attr("width", w)
    .attr("height", h)

var g = vis.append("svg:g")
    .attr("transform", "translate(0, 200)");

var line = d3.svg.line()
    .x(function(d,i) { return x(i); })
    .y(function(d) { return -1 * y(d); })

g.append("svg:path").attr("d", line(data));

g.append("svg:line")
    .attr("x1", x(0))
    .attr("y1", -1 * y(0))
    .attr("x2", x(w))
    .attr("y2", -1 * y(0))

g.append("svg:line")
    .attr("x1", x(0))
    .attr("y1", -1 * y(0))
    .attr("x2", x(0))
    .attr("y2", -1 * y(d3.max(data)))

g.selectAll(".xLabel")
    .data(x.ticks(5))
    .enter().append("svg:text")
    .attr("class", "xLabel")
    .text(String)
    .attr("x", function(d) { return x(d) })
    .attr("y", 0)
    .attr("text-anchor", "middle")

g.selectAll(".yLabel")
    .data(y.ticks(4))
    .enter().append("svg:text")
    .attr("class", "yLabel")
    .text(String)
    .attr("x", 0)
    .attr("y", function(d) { return -1 * y(d) })
    .attr("text-anchor", "right")
    .attr("dy", 4)

g.selectAll(".xTicks")
    .data(x.ticks(5))
    .enter().append("svg:line")
    .attr("class", "xTicks")
    .attr("x1", function(d) { return x(d); })
    .attr("y1", -1 * y(0))
    .attr("x2", function(d) { return x(d); })
    .attr("y2", -1 * y(-0.3))

g.selectAll(".yTicks")
    .data(y.ticks(4))
    .enter().append("svg:line")
    .attr("class", "yTicks")
    .attr("y1", function(d) { return -1 * y(d); })
    .attr("x1", x(-0.3))
    .attr("y2", function(d) { return -1 * y(d); })
    .attr("x2", x(0))

我需要将x轴格式化为日期。我需要一个x轴图表，x轴格式为日期。日期存储在变量date中（如您所见，它不是线性的）。

我尝试使用var parseDate = d3.time.format("%Y-%m-%d %H:%M:%S").parse;解析日期，但我真的不明白如何使用此函数，并且找不到任何从变量获取日期而不是从文件获取日期的示例。

关于如何使用日期作为x轴将我的图表转换为xy图表的任何想法？

在d3.js折线图上，如何使用X轴作为日期？

0 个答案: