d3.min.js未捕获的TypeError:a.map不是函数 [英] d3.min.js Uncaught TypeError: a.map is not a function
本文介绍了d3.min.js未捕获的TypeError:a.map不是函数的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
I'm starting to use D3 and I'm trying to work with an example using my own JSON. The code is showing Uncaught TypeError: a.map is not a function, but the JSON is already parsed, so I don't know what can be.
这是我的代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Step 1 - A 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>
这是页面JSON返回的内容:
This is what the page JSON returns:
curl -i -X GET 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"}]}
推荐答案
这是因为pie函数需要一个数组作为其参数，因此您正在传递作为对象的dataset.
That is because pie function requires an array as its argument, you are passing dataset which is an object.
请尝试传递作为数组的dataset.data
Instead try to pass dataset.data which is an 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);
});
这篇关于d3.min.js未捕获的TypeError:a.map不是函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
