2016-02-03 38 views
3

我開始使用D3,我試圖使用自己的JSON與example一起工作。代碼顯示Uncaught TypeError:a.map不是函數,但是JSON已經被解析,所以我不知道會是什麼。d3.min.js Uncaught TypeError:a.map不是函數

這是我的代碼:

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

回答

5

這是因爲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); 
    }); 
+0

真棒,這工作,但不是出了在該示例中所示的餡餅,我只是改變了數據集,我該怎麼辦? – Rednaxel

+0

@Rednaxel對不起,不是D3專家... –

+0

好的,謝謝,我會提出另一個問題。 – Rednaxel

相關問題