Question

我正在尝试在d3中构建时间序列行，使用x轴的日期和每个日期的条目数作为y轴。我无法通过日期格式化程序移动数据对象的日期部分，然后是缩放，然后进入我的行。

在Codepen http://codepen.io/equivalentideas/pen/HaoIs/

中查看

提前感谢您的帮助！

            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"

Answer 1

您尚未使用parseDate。你错过了这个：

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

看看这个example。

Answer 2

一些明显的明显问题：

1）您没有将svg附加到body或div的任何部分。你的行应该是这样的：

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

2）我怀疑d3能理解你对width和height的定义 dateParse。宽度和高度是图表大小的定义

3）我认为没有必要d3因为{{1}}会在内部为你做这件事。

最后，查看Niranjan提供的example。

Answer 3

还有其他一些问题在这里发生。首先，宽度/高度不是数字，因此yScale和xScale范围无效（这就是为什么你在行路径中得到＆＃34; NaN＆＃34;）。

这很糟糕：

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]);

...＆＃34; 8em＆＃34;在数字svg路径坐标中0表示？所以，改为编号：

var width = 500,
height = 100;

修复后，您仍然会遇到错误，因为y值的映射无法正常工作。您需要不同日期的计数直方图。您应该以这种方式生成数据并将其提供给行生成器。

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;
};

一旦你解决了这两件事，它应该有效。这是一个jsFiddle：http://jsfiddle.net/reblace/j3LzY/

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

3 个答案: