D3 - 制作一个有错误的简单圆环图答案

【问题标题】：D3 - Making a simple donut chart having errorD3 - 制作一个有错误的简单圆环图
【发布时间】：2017-04-16 00:52:04
【问题描述】：

使用 D3 - V4，我正在制作一个简单的圆环图。我只有三个输入字母 - A、B、C。它们的频率为 60、30、10。我想要一个圆环图，但我却出错了。

我正在这里寻求帮助...http://jsfiddle.net/Qh9X5/1196/

虽然它是基于 V3 的，但我使用的是 V4 并进行了适当的更改。

片段：

<html>

<head>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.12/angular.min.js"></script> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js"></script>

</head> 

<body ng-app="myApp" ng-controller="myCtrl"> 

  <svg></svg>

  <script>

      //module declaration 
      var app = angular.module('myApp',[]);

      //Controller declaration
      app.controller('myCtrl',function($scope){

          $scope.svgWidth = 800;//svg Width
          $scope.svgHeight = 500;//svg Height 

          //Data in proper format 
          var data = [
                {"letter": "A","frequency": "60"},
                {"letter": "B","frequency": "30"},
                {"letter": "C","frequency": "10"}
          ];

          //removing prior svg elements ie clean up svg 
          d3.select('svg').selectAll("*").remove();

          //resetting svg height and width in current svg 
          d3.select("svg").attr("width", $scope.svgWidth).attr("height", $scope.svgHeight);

          //Setting up of our svg with proper calculations 
          var svg = d3.select("svg");
          var margin = {top: 20, right: 20, bottom: 30, left: 40};
          var width = svg.attr("width") - margin.left - margin.right;
          var height = svg.attr("height") - margin.top - margin.bottom;

          //Plotting our base area in svg in which chart will be shown 
          var g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

          var pie = d3.layout.pie().sort(null);

          var piedata = pie(data.frequency);


          var arc = d3.arc()
              .innerRadius(radius - 100)
              .outerRadius(radius - 50);

          var path = g.selectAll("path")
              .data(piedata)
              .enter().append("path")
              .attr("fill",function() { return "hsl(" + Math.random() * 360 + ",100%,50%)"; })
              .attr("d", arc);


          g.selectAll("text").data(data.letter)
              .enter()
              .append("text")
              .attr("text-anchor", "middle")
              .attr("x", function(d) {
                  var a = d.startAngle + (d.endAngle - d.startAngle)/2 - Math.PI/2;
                  d.cx = Math.cos(a) * (radius - 75);
                  return d.x = Math.cos(a) * (radius - 20);
              })
              .attr("y", function(d) {
                  var a = d.startAngle + (d.endAngle - d.startAngle)/2 - Math.PI/2;
                  d.cy = Math.sin(a) * (radius - 75);
                  return d.y = Math.sin(a) * (radius - 20);
              })
      });

  </script> 

</body> 

</html>

错误：

任何帮助将不胜感激。请帮我用 D3 - V4

画一个简单的圆环图

【问题讨论】：

为有问题的人创建 jsfiddle
jsfiddle.net/dpbmjLfm

标签： javascript angularjs d3.js svg donut-chart

【解决方案1】：

与new version

var pie = d3.layout.pie().sort(null);

应该如下图，

   var pie = d3.pie().sort(null);

【讨论】：

当我尝试实现这个时，我得到 VM279 angular.min.js:108 TypeError: Cannot read property 'length' of undefined at t (d3.min.js:5)

【解决方案2】：

这里有很多问题：

正如@Sajeetharan 所说，现在是d3.pie()
您尚未定义radius 变量
您没有为pie 函数提供正确的数据，因为您还没有设置.value function。
您在 text 选择器中的绑定是错误的，您从未设置文本。

到这里就全部搞定了：

$scope = {}

$scope.svgWidth = 800; //svg Width
$scope.svgHeight = 500; //svg Height 

//Data in proper format 
var data = [{
  "letter": "A",
  "frequency": "60"
}, {
  "letter": "B",
  "frequency": "30"
}, {
  "letter": "C",
  "frequency": "10"
}];

//removing prior svg elements ie clean up svg 
d3.select('svg').selectAll("*").remove();

//resetting svg height and width in current svg 
d3.select("svg").attr("width", $scope.svgWidth).attr("height", $scope.svgHeight);

//Setting up of our svg with proper calculations 
var svg = d3.select("svg");
var margin = {
  top: 20,
  right: 20,
  bottom: 30,
  left: 40
};
var width = svg.attr("width") - margin.left - margin.right;
var height = svg.attr("height") - margin.top - margin.bottom;
var radius = 200;

//Plotting our base area in svg in which chart will be shown 
var g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var pie = d3.pie().sort(null)
  .value(function(d) {
    return d.frequency;
  });

var piedata = pie(data);

var arc = d3.arc()
  .innerRadius(radius - 100)
  .outerRadius(radius - 50);

var path = g.selectAll("path")
  .data(piedata)
  .enter().append("path")
  .attr("fill", function() {
    return "hsl(" + Math.random() * 360 + ",100%,50%)";
  })
  .attr("d", arc);


g.selectAll("text").data(piedata)
  .enter()
  .append("text")
  .attr("text-anchor", "middle")
  .attr("x", function(d) {
    var a = d.startAngle + (d.endAngle - d.startAngle) / 2 - Math.PI / 2;
    d.cx = Math.cos(a) * (radius - 75);
    return d.x = Math.cos(a) * (radius - 20);
  })
  .attr("y", function(d) {
    var a = d.startAngle + (d.endAngle - d.startAngle) / 2 - Math.PI / 2;
    d.cy = Math.sin(a) * (radius - 75);
    return d.y = Math.sin(a) * (radius - 20);
  })
  .text(function(d) {
    return d.data.letter;
  })

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js"></script>
<svg>
</svg>

【讨论】：