D3-在甜甜圈或饼图中，从标签到弧的折线
[英]D3 - Polylines from label to arc in Donut or Pie Chart
问题描述
我正在制作一个简单的甜甜圈图。 我正在提供数据并按预期生成甜甜圈。 同样，相距较远的标签也要添加。 现在，我想添加从标签到弧中心的直线。 但是，我没有收到任何错误，也没有看到任何行。 请帮助！
片段：
//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; 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 dx = 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 dy = Math.sin(a) * (radius - 20); }) .text(function(d) { return d.data.letter; }); var polyline = g.select(".lines") .selectAll("polyline") .data(pie(data), function(d){ return d.data.letter }); polyline.enter().append("polyline"); });
<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> </body>
参考：
1 个解决方案
解决方案1
2 已采纳 2016-12-07 13:59:26
在您的链接示例中，作者引入了一个辅助函数来计算圆弧的角度，然后使用polyline进行绘制。 窃取它们的实现并将其应用于您的图表如下所示：
<!DOCTYPE html> <html> <head> <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) { var $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 outerArc = d3.arc() .innerRadius(radius * 0.9) .outerRadius(radius * 0.9); 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 dx = 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 dy = Math.sin(a) * (radius - 20); }) */ .attr("transform", function(d){ var pos = outerArc.centroid(d); pos[0] = radius * (midAngle(d) < Math.PI ? 1 : -1); return "translate("+ pos +")"; }) .text(function(d) { return d.data.letter; }); function midAngle(d) { return d.startAngle + (d.endAngle - d.startAngle) / 2; } var polyline = g.selectAll("polyline") .data(piedata, function(d) { return d.data.letter }) .enter() .append("polyline") .attr("points", function(d) { var pos = outerArc.centroid(d); pos[0] = radius * 0.95 * (midAngle(d) < Math.PI ? 1 : -1); return [arc.centroid(d), outerArc.centroid(d), pos]; }) .style("fill", "none") .style("stroke", "black") .style("stroke-width", "2px"); //}); </script> </body> </html>
D3中的Pie（圆环）图表分段顺序
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.