d3js时间格式答案

【问题标题】：d3js time formatd3js时间格式
【发布时间】：2013-03-03 11:25:35
【问题描述】：

我是 d3 的新手，所以很抱歉这个问题有一个明显的答案。我正在尝试创建一个简单的路径，并将输入作为类似的 json 文件

    var data = [{"date":"2012-10-22","debit":"150.00"},
                {"date":"2012-10-29","debit":"1650.00"}, .....

然后我正在尝试制作a比例

    var x = d3.time.scale()
            .domain(d3.extent(data, function(d) { return (d.date); }))
            .range([0, w]);

d3.extend 返回正确的值，但是当我将其输入到行和路径中时，我得到 NaN。以下是我的代码

    var margin = {top: 20, right: 50, bottom: 30, left: 50},
        w = 600 - margin.left - margin.right,
        h = 400 - margin.top - margin.bottom,
        barPadding = 3,

    var debitMax = d3.max(data, function (d) { return + d.debit;});
    var x = d3.time.scale()
            .domain(d3.extent(data, function(d) { return (d.date); }))
            .range([0, w]);
    var y = d3.scale.linear()
            .domain([0, debitMax])
            .range([h, 0]);

    var valueline = d3.svg.line()
            .x(function(d) { return x((d.date)); })
            .y(function(d) { return y(d.debit); })
            .interpolate("basis");

    var svgContainer = d3.select("div").append("svg")
            .attr("width", w + margin.left + margin.right)
            .attr("height", h + margin.top + margin.bottom)

    var debitPath = svgContainer
            .append("path")
            .attr("d", valueline(data));

这是我在萤火虫上得到的结果

           Error: Problem parsing d="MNaN,318.181818 ..........

谢谢

【问题讨论】：

标签： javascript graph d3.js

【解决方案1】：

您的 JSON 中的日期实际上并不是 Javascript 可以以合理的方式处理的东西——您需要将其解析为日期对象。 d3 为此提供了各种功能（请参阅the documentation）。在你的情况下，你需要像

var parseDate = d3.time.format("%Y-%m-%d").parse;
...
.domain(d3.extent(data, function(d) { return parseDate(d.date); }))
...
.x(function(d) { return x(parseDate(d.date)); })

【讨论】：