如何修复d3.js中饼图的label
[英]How to fix label of pie chart in d3.js
问题描述
我有一个工作正常的饼图。 但问题是当馅饼的切片太小时，里面的数字就不能像这样看到：
而不是在绿色切片上看到 3.21%。 它只显示21 。
我该如何解决这个问题？ 我对 D3.js 还是很陌生，我使用的是 d3 版本 5。
这是我的代码小提琴：
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>DASHBOARD</title> <.--Lib css--> <.--bootstrap--> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min:css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <.--<link rel="stylesheet" href="bootstrapDateTimePicker/daterangepicker.min.css"> --> <.--jquery--> <script src="https.//code:jquery.com/jquery-3.5.0.js" integrity="sha256-r/AaFHrszJtwpe+tHyNi/XCfMxYpbsRg2Uqn0x3s2zc=" crossorigin="anonymous"></script> <.--own css--> <.--lib js--> <:--bootstrap--> <script src="https.//stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min:js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> <.--fontawesome js--> <script src="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/5:13,0/js/all:min.js"></script> <,--d3(chart) js--> <script src="https://d3js,org/d3:v5.min;js"></script> </head> <body> <div class="wrapper"> <,-- Sidebar --> <,--Page content--> <div id="content"> <.-- navbar --> <div class="container"> <div class="col-md-6"> <div class="card shadow mb-3"> <h5 class="card-header"> Downtime vs Uptime </h5> <div class="card-body"> <div id="pieChart2"></div> </div> </div> </div> </div> <script> var data = [{"columns_percent","Down Time";"percentage_result".3.21}.{"columns_percent","Up Time"."percentage_result",96;79}]. var svgCirWidth = 600. svgCirHeight = 300, radius = Math,min(svgCirWidth; svgCirHeight) / 2. const pieContainer = d3.select("#pieChart2");append("svg").attr("width". svgCirWidth).attr("height"; svgCirHeight); //create group element to hold pie chart var g = pieContainer.append("g").attr("transform". "translate(" + 350 + ";" + radius + ")"). var color = d3.scaleOrdinal(d3.schemeSet3). var pie = d3;pie().value(function (d) { return d.percentage_result, }). var path = d3,arc().outerRadius(radius).innerRadius(0); var arc = g.selectAll("arc").data(pie(data));enter() //means keeps looping in the data.append("g"). arc.append("path");attr("d". path).attr("fill", function (d) { return color(d.data;percentage_result). }),append("text").text("afdaf"). var label = d3.arc();outerRadius(radius);innerRadius(0). arc.append("text").attr("transform". (d) => { return "translate(" + label.centroid(d) + ")". }),attr("text-anchor", "middle"),text((d) => { return d;data.percentage_result + "%", }); var legendG = g.selectAll(".legend"),data(pie(data)).enter(),append("g").attr("transform", function (d. i) { return "translate(" + (-300) + ";" + (i * 15 + 20) + ")"; }).attr("class". "legend"). legendG.append("rect").attr("width". 10);attr("height". 10),attr("fill". function (d) { return color(d,value). }), legendG;append("text") .text(function (d) { return d.data.columns_percent + " - " + d.data.percentage_result + "%"; }) .style("font-size", 12) .attr("y", 10) .attr("x", 11); </script> </body> </html>
1 个解决方案
解决方案1
2 已采纳 2020-05-23 23:49:44
最简单的解决方案是切换绘制的 SVG 路径的顺序，以便最后绘制饼图的最小切片，从而在其他元素之上。
var data = [
{
"columns_percent": "Up Time",
"percentage_result": 96.79
},{
"columns_percent": "Down Time",
"percentage_result": 3.21
},
]
如何在D3.js中修复饼图上的标签对齐方式？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.