javascript - D3 多线图 x 轴返回 NaN

Question

我正在尝试绘制一个 XY 图，其中 X 轴上有时间单位:

http://jsfiddle.net/VfcLa/

时间以 ISO 格式存储在数据集合中，我使用以下方法解析它:

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

x 轴刻度是使用时间刻度函数生成的:

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

x 轴域定义如下:

x.domain(d3.extent(data.e1), function (d) {        return d.time;    });

并且情节线是使用以下函数生成的:

   var line = d3.svg.line()
        .interpolate("basis")
        .x(function(d) {
            return x(d.time);
        })
        .y(function(d) {
            return y(d.value);
        });

每次使用已解析的 ISO 日期参数调用 x() 函数时，它都会返回 NaN。

d="MNaN,0.3727223712260468LNaN,3.551619373753615CNaN,6.730516376281183,NaN,13.088310381336319,NaN,15.327467421250939CNaN,17.56 662446116556,NaN,15.687144535939666,NaN,12.446127138207757CNaN,9.205109740475848,NaN,4.602554870237924,NaN,5.316237018898292CNaN, 6.02991916755866,南,12.05983833511732,NaN,17.974294680466606CNaN,23.888751025815896,NaN,29.687744548955813,NaN,29.192971911030863CNaN,28.69819927 3105914,NaN,21.9096604741161,NaN,16.400308154832988CNaN,10.890955835549873,NaN,6.660789995973459,NaN,7.246710113817281CNaN,7.8326 30231661104,南,13.234636306925163,南,34.457639028148215 CNaN,55.68064174937127,NaN,92.72464111655331,NaN,93.00921342738123CNaN,93.29378573820912,NaN,56.818930992682894,NaN,36.501416168 287236CNaN,16.18390134389157,NaN,12.02372644062648,NaN,9.943638988993934LNaN,7.8635515373613885"

有人知道我对 x 轴的定义有什么问题吗？

Answer 1

d3.extent方法将数据数组作为输入参数，将访问器方法作为第二个参数。访问器告诉应该使用数组的哪个属性来计算范围。您可能希望将域定义为

// Use the time extent as domain
x.domain(d3.extent(data.e1, function (d) { return d.time; }));

问候，