Javascript d3时间序列，从数据中读取日期，按日期计算条目

我试图在d3中构建一条时间序列线，使用日期作为x轴，每个日期的条目数作为y轴。我无法将数据对象的日期部分通过日期格式化程序，然后是刻度，然后移动到我的行中

在代码笔中看到它

提前感谢您的帮助

            var data = [{"title":"1","date":"20140509"},{"title":"2)","date":"20140401"},{"title":"3","date":"20140415"},{"title":"4","date":"20140416"},{"title":"5","date":"20140416"},{"title":"6","date":"20140422"},{"title":"7","date":"20140422"},{"title":"8","date":"20140423"},{"title":"9","date":"20140423"},{"title":"10","date":"20140423"},{"title":"11","date":"20140502"},{"title":"12","date":"20140502"}

            var width = "100%",
                height = "8em";

            var parseDate = d3.time.format("%Y%m%d").parse;

            // X Scale
            var x = d3.time.scale()
                .range([0, width]);

            // Y Scale
            var y = d3.scale.linear()
                .range([height, 0]);

            // define the line
            var line = d3.svg.line()
                .x(function(d) {
                    return x(d.date);
                })
                .y(function(d) {
                    return y(+d);
                })


            data.forEach(function(d) {
                d.date = parseDate(d.date);
            });

            x.domain(d3.extent(data, function(d) { return d.date; }));
            y.domain(d3.extent(data, function(d) { return d; }));

            // build the svg canvas
            var svg = d3.select("body")
                        .append("svg")
                        .attr("width", width)
                        .attr("height", height);

            // build the line
            svg.append("path")
                .datum(data)
                .attr("class", "line")
                .attr("d", line);

目前我得到一个js控制台错误

Error: Invalid value for <path> attribute d="MNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaN" 

错误：属性d=“MNaN，NaNLNaN，NaNLNaN，NaNLNaN，NaNLNaN，NaNLNaN，NaNLNaN，NaNLNaN，NaNLNaN，NaNLNaN，NaNLNaN，NaNLNaN，NaN”的值无效

您没有使用

parseDate

。您缺少以下内容：

data.forEach(function(d) {
    d.date = parseDate(d.date);
});

---

看看这个。

一些明显的问题：

1） 您没有将svg附加到

正文

或

div

的任何部分。你应该有这样一条线：

d3.select("body").append("svg").attr("width", width).attr("height", height);

2） 我怀疑

d3

能否理解您对

宽度的定义，以及
高度
。宽度和高度是图表大小的定义

3） 我认为没有必要使用
dateParse
，因为
d3
将在内部为您执行此操作

最后，检查Niranjan提供的
 这里还有一些其他问题。首先，宽度/高度不是数字，因此yScale和xScale范围无效（这就是为什么在行路径中得到“NaN”）

这很糟糕：

var width = "100%",
height = "8em";

因为它们没有以下比例定义所要求的有效数字范围：

// X Scale
var x = d3.time.scale().range([0, width]);

// Y Scale
var y = d3.scale.linear().range([height, 0]);

…在数字svg路径坐标中，“8em”到0意味着什么？所以，把它们变成数字：

var width = 500,
height = 100;

修复后，仍然会有错误，因为y值的映射无法工作。您需要不同日期的计数直方图。您应该以这种方式生成数据并将其输入到line generator中

var generateData = function(data){
    var newData = [];
    var dateMap = {};
    data.forEach(function(element){
        var newElement;
        if(dateMap[element.date]){
            newElement = dateMap[element.date];
        } else {
            newElement = { date: parseDate(element.date), count: 0 };
            dateMap[element.date] = newElement;
            newData.push(newElement);
        }
        newElement.count += 1;
    });

    newData.sort(function(a,b){
        return a.date.getTime() - b.date.getTime();
    });

    return newData;
};

一旦你解决了这两件事，它应该会起作用。下面是一个JSFIDLE:
那么，您的代码中有什么问题？感谢您的评论jhyap，我已经在问题的底部包含了错误。您能在JSFIDLE中重现问题吗？用代码笔制作，添加到问题中。再次感谢，这是一个好主意。我已经将其添加到脚本中，但不幸的是它仍然返回
错误：属性d=“MNaN，NaNLNaN，NaNLNaN，NaNLNaN，NaNLNaN，NaNLNaN，NaNLNaN，NaNLNaN，NaNLNaN，NaNLNaN”
的值无效，谢谢您指出这一点。它和密码笔不同步了。修复了svg的主体选择。这些宽度和高度定义确实起作用，您可以看到它被渲染到页面中。