As a first-time user of d3.js and new to JavaScript, I am trying to create a chart that plots three waves, with the third wave partially deconstructing the first two. I have stored the necessary calculations in a JSON object labeled data and have defined three lines - line1, line2, and line3. Despite watching numerous YouTube tutorials and reviewing code snippets on Stack Overflow and Mike Bostock's Wikipedia page, I am struggling to understand why the lines are not being displayed. Could it be an issue with how I am binding the data? While the console does not show any errors, I have noticed that the path contains values of NAN (not a number) for what seems to be the time component in the JSON object. The sample code snippet below showcases a portion that may be causing the problem:
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;
});
In addition, the following code segment may also be contributing to the issue:
// Why aren't the lines drawing? Is something missing?
canvas.append("g")
.datum(data)
.attr("class", "line")
.attr("d", line1);
I would greatly appreciate any assistance and can provide further details if needed. Thank you in advance!
Link to the jsfiddle of my attempt: https://jsfiddle.net/fdhnqh1d/3/