CODEWITHSUNDEEP
javascriptjsond3.jspath
Pat Mulvihill
Pat Mulvihill

Reputation: 53

Having trouble drawing lines in d3js

First time d3.js user, new to javascript as well. I want to create a chart that plots 3 waves, the third of which being the partial deconstruction of the first 2. I've saved the calculations that I need into a JSON object called data and I have created the 3 lines line1 line2 and line3. I have followed youtube tutorials and looked at countless code snippets on stackoverflow and Mike Bostock's wikipedia page. I cannot for the life of me figure out why the lines aren't drawing? I'm new to JSON but I wanted to learn it so that's how I saved my data. Am I not binding the data properly? The console doesn't give me an error when I run the code but I noticed that the path contains NAN or not a number values for what appears to be the time member of the JSON object: 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 and it goes on and on. I'm assuming these are my values that I'm generating in my first loop?

Part of code that might be giving issues (full code available below in jsfiddle link):

    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;
});

and maybe this: 

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

Any help is appreciated, and I will be happy to provide any additional information. Thank you!

This is the jsfiddle of my attempt: https://jsfiddle.net/fdhnqh1d/3/

Upvotes: 0

Views: 180

Answers (1)

Gerard Sexton
Gerard Sexton

Reputation: 3210

I have updated your fiddle https://jsfiddle.net/fdhnqh1d/4/ to fix the generation.

Your line generators were referencing an undefined property d.y1. Here I changed to d.wave1 to match your data model.

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

Now it outputs

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

Upvotes: 1

Related Questions