Invalid value for <path> attribute
Before actually plotting the graph, I needed to convert the dates with the following line:
for (i = 0; i < data.length; i++) { data[i].Date = parseDate(data[i].Date); }
This line can be seen in the following, final code:
var data; var margin = { top: 20, right: 60, bottom: 30, left: 50 }, width = 1000 - margin.left - margin.right, height = 300 - margin.top - margin.bottom; function parseDateForViewing(d) { return d3.time.format('%b %Y')(d3.time.format('%m/%d/%Y').parse(d)); } function parseDate2(d) { return d3.time.format('%c')(d3.time.format('%m/%d/%Y').parse(d)); } var parseDate = d3.time.format("%m/%d/%Y").parse; var x = d3.time.scale() .range([0, width]); var y = d3.scale.linear() .range([height, 0]); var xAxis = d3.svg.axis() .scale(x) .orient("bottom"); var yAxis = d3.svg.axis() .scale(y) .orient("left"); var line = d3.svg.line() .x(function (d) { return x(d.Date); }) .y(function (d) { return y(d.NumberOfActive); }); var svg = d3.select("#svgsection").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); var d = thedata.d; data = thedata.d; var _len = d.length; var post, i; for (i = 0; i < data.length; i++) { data[i].Date = parseDate(data[i].Date); } for (i = 0; i < data.length; i++) { d = data[i]; x.domain(d3.extent(data, function (d) { return d.Date; })); y.domain(d3.extent(data, function (d) { return d.NumberOfActive; })); svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis); svg.append("g") .attr("class", "y axis") .call(yAxis) .append("text") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", ".71em") .style("text-anchor", "end") .text("Closed Loans"); svg.append("path") .datum(data) .attr("class", "line") .attr("d", line); svg.append("text") .attr("x", (width / 2)) .attr("y", 0 - (margin.top / 2) + 10) .attr("text-anchor", "middle") .style("font-size", "16px") .text("Closed Loans by Month");
I faced the same problem with my code.I found that it is because if there is no value then this error will come.We have to make a check for the value we are using like : if(!value){ value=correct_value; }