Issue with d3 Multi Line Chart - d3.js

Question

I didn't get line throw this code,
i get perfect axis both side but line is still missing
while calling drawline function i got this errorr "Error: attribute d: Expected number, "M0,NaNL116.66666666…"."
i couldn't find out any solutions.
<script src="http://d3js.org/d3.v4.min.js"></script>
//Data from Webservice
var jsonData = [{ "YEAR": "2017", "JAN": "0", "FEB": "21", "MAR": "65", "APR": "25", "MAY": "33", "JUN": "30", "JUL": "17", "AUG": "26", "SEP": "0", "OCT": "5", "NOV": "33", "DEC": "12" }, { "YEAR": "2018", "JAN": "10", "FEB": "0", "MAR": "0", "APR": "0", "MAY": "0", "JUN": "0", "JUL": "0", "AUG": "0", "SEP": "0", "OCT": "0", "NOV": "0", "DEC": "0" }]; `
var x = d3.scaleBand().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);
var tests = months.map(function (m) {`
return {
month: m,
values: jsonData.map(function (d) {
return {
year: d.YEAR,
quote: +d[m]
};
})
};
});
x.domain(tests.map(function (d) { return d.month; }));
y.domain([d3.min(tests, function (c) {
return d3.min(c.values, function (v) {
return v.quote;
});
}),
d3.max(tests, function (c) { return d3.max(c.values, ` `function (v) { return v.quote; }); })]);
// Create Line
var drawLine = d3.line()
.curve(d3.curveBasis)
.x(function (d) {
debugger;
return x(d.month);
})
.y(function (d) {
debugger;
return y(d.values);
});
var draw = svg.selectAll(".month")
.data(tests)
.enter().append("g")
.attr("class", "month")
.datum(tests)
.append("path")
.attr("class", "line")
.attr("d", drawLine)
.style("stroke", function (d) {
return color(d.year);
})
`

Answer 1

Looks like a lot of stuff is missing from your code.
I made a few changes in the code and it works now.
//Data from Webservice
var jsonData = [{ "YEAR": "2017", "JAN": "0", "FEB": "21", "MAR": "65", "APR": "25", "MAY": "33", "JUN": "30", "JUL": "17", "AUG": "26", "SEP": "0", "OCT": "5", "NOV": "33", "DEC": "12" }, { "YEAR": "2018", "JAN": "10", "FEB": "0", "MAR": "0", "APR": "0", "MAY": "0", "JUN": "0", "JUL": "0", "AUG": "0", "SEP": "0", "OCT": "0", "NOV": "0", "DEC": "0" }];
var width = 400;
var height = 400;
var svg = d3.select('#lineChart');
var x = d3.scaleBand().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);
var months = [];
d3.keys(jsonData[0]).filter(function(key) {
if (key !== "YEAR") {
months.push(key)
}
});
var years = [];
for (var i = 0; i < jsonData.length; i++) {
years.push(jsonData[i]['YEAR']);
}
var tests = months.map(function(m) {
return {
month: m,
values: jsonData.map(function(d) {
return {
year: d.YEAR,
quote: parseInt(+d[m])
};
})
};
});
x.domain(tests.map(function(d) {
return d.month;
}));
var extent = [d3.min(tests, function(c) {
return d3.min(c.values, function(v) {
return v.quote;
});
}),
d3.max(tests, function(c) {
return d3.max(c.values, function(v) {
return v.quote;
});
})
]
y.domain(extent);
// Create Line
var drawLine = d3.line()
.curve(d3.curveBasis)
.x(function(d) {
return x(d.month);
})
.y(function(d) {
return y((d.values[0]['quote']));
});
var draw = svg.append('g').append("path")
.datum(tests)
.attr("class", "line")
.attr("d", drawLine)
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.attr("stroke-width", 1.5);