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 - 製作一個有錯誤的簡單環形圖表

回答

相關問題