D3 - 制作一个有错误的简单圆环图
D3 - Making a simple donut chart having error
我正在使用 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
画一个简单的圆环图
var pie = d3.layout.pie().sort(null);
应该像下面这样,
var pie = d3.pie().sort(null);
这里有很多问题:
- 正如@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>
我正在使用 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
画一个简单的圆环图var pie = d3.layout.pie().sort(null);
应该像下面这样,
var pie = d3.pie().sort(null);
这里有很多问题:
- 正如@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>