d3.min.js未捕获TypeError：a.map不是函数

Question

我开始使用D3和我试图用工作实例用我自己的JSON。 代码显示Uncaught TypeError：a.map不是函数，但JSON已经被解析，所以我不知道它是什么。

这是我的代码：

<!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返回的内容：

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"}]}

Answer 1

这是因为pie函数需要一个数组作为参数，你传递的dataset是一个对象。

而是尝试传递dataset.data ，这是一个数组

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不是函数

问题描述

1 个解决方案

解决方案1
6 已采纳 2016-02-03 03:07:36

d3.min.js未捕获TypeError：a.map不是函数

问题描述

1 个解决方案

解决方案1 6 已采纳 2016-02-03 03:07:36

解决方案1
6 已采纳 2016-02-03 03:07:36