D3 - 制作一个有错误的简单环形图表

-1

使用D3 - V4，我制作了一个简单的环形图表。我只有三个输入字母--A，B，C。他们的频率为60,30,10。我想要一张甜甜圈图表，但我却错误地出现了。D3 - 制作一个有错误的简单环形图表

我从这里走的帮助... 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

来源

2016-12-01 Deadpool

为一个创建的jsfiddle有问题 – Sajeetharan

https://jsfiddle.net/dpbmjLfm/ – Deadpool

很多这里的问题：

正如@Sajeetharan所说，它现在d3.pie()
您还没有定义的变量radius
因为你还没有建立一个.valuefunction你是不是喂养pie功能正确的数据。
您在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>

来源

2016-12-01 12:32:14 Mark

随着new version

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

应该有如下，

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

来源

2016-12-01 11:55:48 Sajeetharan

当我尝试实现这个我得到VM279 angular.min.js：108 TypeError：无法读取属性'长度'未定义在t（d3.min.js：5） –

D3 - 制作一个有错误的简单环形图表

回答

相关问题