javascript - d3.min.js Uncaught TypeError: a.map is not a function -
i'm starting use d3 , i'm trying work example using own json. code showing uncaught typeerror: a.map not function, json parsed, don't know can be.
this code:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>step 1 - basic pie chart</title> </head> <body> <div id="chart"></div> <script type=text/javascript src="{{url_for('static', filename='d3.min.js') }}"></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script> (function(d3) { 'use strict'; var width = 360; var height = 360; var radius = math.min(width, height) / 2; var color = d3.scale.category20b(); var svg = d3.select('#chart') .append('svg') .attr('width', width) .attr('height', height) .append('g') .attr('transform', 'translate(' + (width / 2) + ',' + (height / 2) + ')'); var arc = d3.svg.arc() .outerradius(radius); var pie = d3.layout.pie() .value(function(d) { return d.value; }) .sort(null); d3.json('https://demo-url.com/api/v1.0/tables/56afce8f243c48393e5b665a' , function(error, dataset){ if (error) throw error; var path = svg.selectall('path') .data(pie(dataset)) .enter() .append('path') .attr('d', arc) .attr('fill', function(d, i) { return color(d.data.name); }); }); })(window.d3); </script> </body> </html> this page json returns:
curl -i -x https://demo-url.com/api/v1.0/tables/56afce8f243c48393e5b665a http/1.1 200 ok content-type: application/json content-length: 702 server: werkzeug/0.11.3 python/2.7.6 date: wed, 03 feb 2016 02:56:32 gmt x-backend: apps-proxy {"data": [{"_id": {"$oid": "56afcea3243c48393e5b665f"}, "iddatasource": {"$oid": "56afce8f243c48393e5b665a"}, "id": 5, "value": 0, "name": "brock"}, {"_id": {"$oid": "56afcea3243c48393e5b665d"}, "iddatasource": {"$oid": "56afce8f243c48393e5b665a"}, "id": 3, "value": 0, "name": "peter"}, {"_id": {"$oid": "56afcea3243c48393e5b665e"}, "iddatasource": {"$oid": "56afce8f243c48393e5b665a"}, "id": 4, "value": 0, "name": "john"}, {"_id": {"$oid": "56afcea3243c48393e5b665b"}, "iddatasource": {"$oid": "56afce8f243c48393e5b665a"}, "id": 1, "value": 0, "name": "ash"}, {"_id": {"$oid": "56afcea3243c48393e5b665c"}, "iddatasource": {"$oid": "56afce8f243c48393e5b665a"}, "id": 2, "value": 0, "name": "sarah"}]}
that because pie function requires array argument, passing dataset object.
instead try pass dataset.data array
var path = svg.selectall('path') .data(pie(dataset.data)) .enter() .append('path') .attr('d', arc) .attr('fill', function(d, i) { return color(d.data.name); });
Comments
Post a Comment