首次使用d3.js的用户，也是javascript新手。我想创建一个绘制3个波形的图表，其中第三个波形是前2个波形的部分解构。我已将所需的计算保存到名为data的JSON对象中，并创建了3条线line1 line2和line3。我遵循了youtube教程，并查看了stackoverflow和Mike Bostock的Wikipedia页面上的无数代码片段。我一辈子都无法弄清楚为什么没有画线？我是JSON的新手，但我想学习它，所以这就是我保存数据的方式。我是否无法正确绑定数据？运行代码时，控制台没有给我错误，但我注意到该路径包含NAN或不包含看起来time像是JSON对象成员的数字值：d="M0,NaNL1.8,NaNL3.6,NaNL5.4,NaNL7.2,NaNL9,NaNL10.8,NaNL12.600000000000001,NaNL14.4,NaNL16.200000000000003,NaNL18.000000000000004,NaNL19.800000000000004,NaNL21.600000000000005,NaNL23.400000000000006,NaNL25.200000000000006,NaNL27.000000000000007,NaNL28.800000000000008,NaNL30.60000000000001,NaNL32.40000000000001,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/
我已经更新了您的小提琴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...
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句