Charts NVD3 multichart：如果x是日期，则行出错

我使用nvd3 multichart。我有两条线和一个条形图

问题是，如果我把x等号，一切都正常，但在我的情况下，x需要是一个日期

当我输入日期时，条形图很好地显示了日期，但没有线条

这是我的密码：

    var testdata = [{
        key: 'Stream',
        values: [{x: '2015-01-01', y: -0.14459575778442077}, {x: '2015-02-01', y: 1.14459575778442077}, {x: '2015-03-01', y: -0.14459575778442077}]
    },
    {
        key: 'Stream1',
        values: [{x: "2015-01-01", y: 2}, {x: "2015-02-01", y: 1}, {x: "2015-03-01", y: 14}]
    },
    {
        key: 'Stream2',
        values: [{x: "2015-01-01", y: 0.14459575778442077}, {x: "2015-02-01", y: 1.45}, {x: "2015-03-01", y: 0.14459575778442077}]
    }
];

testdata[0].type = "line";
testdata[0].yAxis = 1;
testdata[1].type = "line";
testdata[1].yAxis = 1;
testdata[2].type = "bar";
testdata[2].yAxis = 1;

nv.addGraph(function() {
    var chart = nv.models.multiChart()
        .margin({top: 30, right: 60, bottom: 50, left: 70})
        .color(d3.scale.category10().range());

    chart.xAxis.tickFormat(function(d) {
            return d3.time.format('%m/%d/%y')(new Date(d))
      });
    chart.yAxis1.tickFormat(d3.format(',.1f'));


    d3.select('#chart1 svg')
        .datum(testdata)
        .transition().duration(500).call(chart);

    return chart;
});

以下是我在控制台中得到的错误：

Error: Invalid value for <path> attribute transform="translate(NaN,841)"
Error: Invalid value for <path> attribute transform="translate(NaN,764.3481053004498)"
Error: Invalid value for <path> attribute transform="translate(NaN,841)"
Error: Invalid value for <path> attribute transform="translate(NaN,713.4880468001999)"
Error: Invalid value for <path> attribute transform="translate(NaN,772.9453840335499)"
Error: Invalid value for <path> attribute transform="translate(NaN,0)"
Uncaught TypeError: Cannot read property 'x' of null

错误：属性transform=“translate（NaN，841）”的值无效
错误：属性transform=“translate（NaN，764.3481053004498）”的值无效
错误：属性transform=“translate（NaN，841）”的值无效
错误：属性transform=“translate（NaN，713.4880468001999）”的值无效
错误：属性transform=“translate（NaN，772.9453840335499）”的值无效
错误：属性transform=“translate（NaN，0）”的值无效
未捕获的TypeError:无法读取null的属性“x”

有人知道我如何使它与我的数据格式一起工作吗？

---

谢谢

折线图不像条形图那样是离散的。您需要使用数字作为x值

我通常的做法是使用时间戳而不是日期字符串，在tickFormat（）函数中，我将其转换为字符串（正如您实际所做的那样）

因此，为了修复您的示例，您应该将所有x值转换为时间戳，或者执行类似操作，在开始创建图表时转换它们：

var chart = nv.models.multiChart()
    .x(function(d) { return new Date(d.x).getTime() })
    .margin({top: 30, right: 60, bottom: 50, left: 70})
    .color(d3.scale.category10().range());

但是，我不喜欢以字符串形式接收日期，在x属性中将其转换为秒，然后在显示时将其转换回日期。我建议从一开始就使用时间戳

---

请注意，您的日期格式不是标准格式。要让Javascript的Date.parse（）函数处理日期，您应该以“MM/DD/YYYY”格式指定它们。

不幸的是，我不能使用时间戳，因为我拥有的数据将来自具有此格式的数据库。我还可以使用其他解决方案吗？这是我不喜欢做的解决方案。首先在.x（）函数中将d.x转换为时间戳，然后在tickFormat（）函数中将其转换回要显示的表示形式。但是您可能希望在x（）函数中使用时间戳。