Question

I'm starting to use D3 and I'm trying to work with an example using my own JSON. The code is not showing any error but it doesn't show the pie, so I don't know what can be.

This is my code:

<!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.data))
            .enter()
            .append('path')
            .attr('d', arc)
            .attr('fill', function(d, i) { 
              return color(d.data.Name);
            });

        }); 

      })(window.d3);
    </script>
  </body>
</html>

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

Answer 1

您的代码没有问题。未显示饼图，因为数据集值为零。在这种情况下，所有饼形切片角度变为0。当有数据时，代码工作正常，并显示饼图。

工作代码段

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="chart"></div>

destination = Node(key: String?, neighbors: [Edge!], visited: Bool, lat: Double, long: Double)

如果你想从零值开始饼图，这个link可能会有用。

D3 Pie Chart not showing

1 个答案: