javascript - 在 d3js 中绘制线条时遇到问题

Question

第一次使用 d3.js，对 javascript 也很陌生。我想创建一个绘制 3 个波浪的图表，其中第三个是前 2 个波浪的部分解构。我已将所需的计算保存到名为 data 的 JSON 对象中，并创建了 3 条线 line1 line2 和 line3。我关注了 youtube 教程，并查看了 stackoverflow 和 Mike Bostock 的维基百科页面上的无数代码片段。我一生都无法弄清楚为什么线条没有画出来？我是 JSON 新手，但我想学习它，所以这就是我保存数据的方式。我没有正确绑定(bind)数据吗？当我运行代码时，控制台没有给出错误，但我注意到路径包含 NAN 或不包含似乎是 JSON 对象的 time 成员的数字值: d =“M0，NaNL1.8，NaNL3.6，NaNL5.4，NaNL7.2，NaNL9，NaNL10.8，NaNL12.600000000000001，NaNL14.4，NaNL16.200000000000003，NaNL18.000000000000004，NaNL19.800000 000000004,NaNL21.600000000000005 ,NaNL23.400000000000006,NaNL25.200000000000006,NaNL27.000000000000007,NaNL28.800000000000008,NaNL30.60000000000001,NaNL32.40000000000 001,NaNL34.20000000000001,NaNL36.00000000000001,NaNL37.800000000000004,NaNL39.599999999999994,NaNL41.4,NaNL43.199999999999996,NaNL44 .99999999999999 如此下去。我假设这些是我在第一个循环中生成的值？

可能会出现问题的部分代码(完整代码可在下面的 jsfiddle 链接中找到):

    var line1 = d3.svg.line()
    .x(function(d) { return widthScale(d.time); })
    .y(function(d) { return verticalScale(d.y1); });

var line2 = d3.svg.line()
    .x(function(d) { return widthScale(d.time); })
    .y(function(d) { return verticalScale(d.y2); });

var line3 = d3.svg.line()
    .x(function(d) { return widthScale(d.time); })
    .y(function(d) { return verticalScale(d.y3); });

data.forEach(function(d) {
    d.time = + d.time;
    d.wave1 = d.wave1;
    d.wave2 = d.wave2;
    d.wave3 = d.wave3;
});

也许是这个:

    // draw lines? what am I missing?
canvas.append("g")
    .datum(data)
    .attr("class", "line")
    .attr("d", line1);

感谢您的帮助，我很乐意提供任何其他信息。谢谢!

这是我尝试的jsfiddle:https://jsfiddle.net/fdhnqh1d/3/

Answer 1

我已经更新了你的 fiddle https://jsfiddle.net/fdhnqh1d/4/修复生成。

您的行生成器引用了未定义的属性d.y1。这里我更改为 d.wave1 以匹配您的数据模型。

var line1 = d3.svg.line()
.x(function(d) { return widthScale(d.time); })
.y(function(d) { return verticalScale(d.wave1); });

现在它输出了

M0,263.5596698504196L1.8,263.5674382668522L3.6,263.5751378843530...