json - d3 & backbone - error parsing d="" -
i'm trying draw simple area chart using data server, d3 , backbone.js. i'm getting error
problem parsing d=""
whenever actual area path being drawn out. error appears twice. error in console follows:
error: problem parsing d="" d3.v3.js:585 attrfunction d3.v3.js:585 (anonymous function) d3.v3.js:868 d3_selection_each d3.v3.js:874 d3_selectionprototype.each d3.v3.js:867 d3_selectionprototype.attr d3.v3.js:567 graphbase.extend.renderdata backboney.html:242 backbone.view.extend.render backboney.html:153 (anonymous function) backboney.html:128 fire jquery-2.0.2.js:2939 self.firewith jquery-2.0.2.js:3051 done jquery-2.0.2.js:7428 (anonymous function) and here code i'm working with:
<!doctype html> <html> <head> <title>bonezy</title> <style> body { font: .7em sans-serif; } #graph { height: 600px; width: 800px; } /* styles axes of graph */ .axis path { fill: none; stroke: #c9c9c9; shape-rendering: crispedges; } .axis line { fill: none; stroke: none; shape-rendering: crispedges; } /* fill of graph */ .area { fill: #49decf; } </style> <meta http-equiv="content-type" content="text/html; charset=utf-8"> </head> <body> <div id="graph"></div> <script src="jquery-2.0.2.js"></script> <script type="text/javascript" src="d3.v3.js"></script> <script type="text/javascript" src="underscore.js"></script> <script type="text/javascript" src="backbone.js"></script> <script> (function ($) { var entry = backbone.model.extend({}); var entries = backbone.collection.extend({ url: 'http://sensors.metabolic.nl/api/v1/entry/?format=json', model: entry, parse: function(response, xhr) { // objects array json response (actual entries) //return response.objects; //console.log('response object value',response.objects[0].value); _.each(response.objects, function (object) { // convert each value attribute actual array object.value = toarray(object.value); // fuck it, extract numerical value , set value // fix when new data struc exists object.value = object.value[1]; }); console.log('finished parsing', response.objects); return response.objects; } }); // used convert shitty sensor value strings arrays function toarray(str) { var trimregex = /[\'\[\]\s\*c\%]/g; var newstr = str.replace(trimregex, ""); var commaindex = newstr.indexof(","); // index of comma (divider between values) var sensorname = newstr.slice(0, commaindex); var sensorvalue = newstr.slice(commaindex + 1); return new array(sensorname, parsefloat(sensorvalue)); } // base of graph draw d3 // mad helps found @ http://jtuulos.github.io/bayd3-may2013/ var graphbase = backbone.view.extend({ defaults: { xattr: "x", yattr: "y", margin: { top: 20, right: 20, bottom: 20, left: 50 } }, initialize: function(options) { var self = this; // constructor options no longer automatically copied self.options = options; self.collection = new entries(); _.bindall(self, 'render'); //self.collection.on('add', self.render(self.options)); // populate collection self.collection.fetch({ data: { /*offset: 20, limit: 20 */}, add: true, reset: true, success: function(collection, response) { console.log('collection fetch success', response); console.log('collection models: ', collection.models); }, error: function() { console.log('alas, failure'); } }).complete(function() { console.log('complete!'); self.render(self.options); }); }, render: function(options) { console.log('render graph base'); this.options = options; var margin = this.options.margin; this.width = this.$el.width() - margin.left - margin.right; this.height = this.$el.height() - margin.top - margin.bottom; console.log("height", this.height); this.svg = d3.select(this.el).append('svg') .attr("width", this.width + margin.left + margin.right) .attr("height", this.height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); this.scales = { x: this.getxscale(), y: this.getyscale() }; this.renderaxes(); this.renderdata(); return this; } }); // extension of graphbase view, contains related data var areagraph = graphbase.extend({ defaults: _.defaults({ /*ex barpadding: 0.1 */ }, graphbase.prototype.defaults), // calculate , return scale , domain of x axis getxscale: function () { //console.log('x scale', this.collection.models[1].get('at')/*this.collection.pluck(this.options.at)*/); console.log('get x scale'); var xattr = this.options.xattr; return d3.time.scale() .range([0, this.width]) //.domain(this.collection.models.pluck(this.options.xattr)); .domain(this.collection.map( function(model) { return model.get(xattr); })); }, // calculate , return scale , domain of y axis getyscale: function() { console.log('get y scale'); var yattr = this.options.yattr; return d3.scale.linear() .range([this.height, 0]) //.domain([0, 1.2 * d3.max(this.collection.pluck(this.options.yattr))]); .domain([0, 1.2 * d3.max(this.collection.map(function(model) { return model.get(yattr); } ))]); }, // render x , y axis renderaxes: function() { console.log('render axes'); var xaxis = d3.svg.axis() .scale(this.scales.x) .orient('bottom'); var yaxis = d3.svg.axis() .scale(this.scales.y) .orient('left'); /*.tickformat(d3.format("") option modify ticks on axis*/ //console.log('svg', this.svg); // adds x axis graph this.svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + this.height + ")") .call(xaxis); // adds y axis graph (ignore label now) this.svg.append("g") .attr("class", "y axis") .call(yaxis); }, // render actual data graph renderdata: function() { console.log('render data'); var chart = this, x = this.scales.x, y = this.scales.y; // calculate area under path var area = d3.svg.area() .x(function(d) { return x(d.at); }) .y0(chart.height) .y1(function(d) { return y(d.value); }); console.log(this.collection.models); this.svg.selectall("path") .data(this.collection.models) .attr("class", "area") //.attr("d", area); .attr("d", function(d) { // generate area var darray = new array(); darray[x] = d.get('at'); darray[y] = d.get('value'); //return area(d.attributes); return area(darray); }); } }); // graph object (areagraph inherits graphbase) var graph = new areagraph({ // backbone view options el: '#graph', // these data attributes read determine values xattr: "at", yattr: "value", margin: { top: 20, right: 20, bottom: 20, left: 50 } }); })(jquery); </script> </body> </html> any insight appreciated!
would easier debug if put code jsfiddle, 1 obvious thing that's wrong:
.attr("d", function(d) { // generate area var darray = new array(); darray[x] = d.get('at'); darray[y] = d.get('value'); //return area(d.attributes); return area(darray); }); this code doesn't make sense me. x,y scales, not array indexes. means "d" attribute path going rubbish (ie., d=""). should use commented out code:
.attr("d", area); to draw area , make sure each element in data array has ".at" , ".value" properties.
Comments
Post a Comment