javascript - D3 is attempting to set attributes of SVG as NaN and I can't figure out why -


i'm trying make basic d3 charts, have little experience doing. here sample of json working (i have 100 objects, left out brevity):

var data = [             {                "orderid": 1,                "shipcountry": "usa",                "freight": 168.0,                "version": 2            },            {                "orderid": 2,                "shipcountry": "usa",                "freight": 336.0,                "version": 2            },            {                "orderid": 3,                "shipcountry": "usa",                "freight": 504.0,                "version": 2            }] 

and here d3 code:

 var margin = { top: 10, bottom: 30, left: 30, right: 20 };  var width = 700 - margin.left - margin.right; var height = 400 - margin.top - margin.bottom; //svg chart margins var svg = d3.select('#chart-wrapper')                 .append('svg')                     .attr('height', height + margin.top + margin.bottom)                     .attr('width', width + margin.left + margin.right)                 .append('g')                     .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');  //xscale based on orderid attribute var xscale = d3.scale.linear().domain([0, 99]).range([0, width]); var yscale = d3.scale.linear().domain([16632, 0]).range(height, 0);     svg.selectall('circle')     .data(data)     .enter()     .append('circle')         .attr('cx', function (d) {             return xscale(d.freight)         })         .attr('cy', function (d) {             return yscale(d.orderid);         })         .attr('r', 2)         .attr('fill', 'green'); 

for reason, cy property of each circle gets set nan- keeps rendering. have switched around freight , orderid fields, , still cy property not set correctly. while debugging, have logged values of each, , appear real numbers. (this happened while trying create line graph- second number of 'd' attribute path nan, when decided attempt scatterplot instead)

any idea going on? thanks

you need make argument .range() array.

var yscale = d3.scale.linear().domain([16632, 0]).range(height, 0); 

is now

var yscale = d3.scale.linear().domain([16632, 0]).range([height, 0]); 

Comments

Popular posts from this blog

apache - PHP Soap issue while content length is larger -

asynchronous - Python asyncio task got bad yield -

javascript - Complete OpenIDConnect auth when requesting via Ajax -