150
rated 0 times
[
153]
[
3]
/ answers: 1 / hits: 16627
/ 10 Years ago, sat, september 27, 2014, 12:00:00
I see other posts with this problem but I just can't seem to solve it. I am new to d3 and am trying to load some data into a line graph, but i keep getting the error
Invalid value for <path> attribute d=MNaN,250LNaN,71.05263157894737LNaN,55.26315789473685
I have setup everything like in an example (which worked), but this isn't working for some reason. I am getting data back from a webservice as a list of the following form: Date=1/1/2014 NumberOfActive=1 (Example). I have tried using the parse functions but they don't really work. Here is my code:
var data;
var margin = { top: 20, right: 20, 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 parseDate(d) {
return d3.time.format('%c')(d3.time.format('%m/%d/%Y').parse(d));
}
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(body).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 + ));
$.ajax({
type: POST,
url: Dashboard.aspx/GetActiveLoansData,
data: '',
contentType: application/json; charset=utf-8,
dataType: json,
success: function (thedata) {
var d = thedata.d;
data = thedata.d;
var _len = d.length;
var post, i;
for (i = 0; i < data.length; i++) {
d = data[i];
var t = parseDate(d.Date);
var s = d.Date;
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);
}
}
});
More From » c#