如何修复d3.js中饼图的label

Question

I have a pie chart that is working fine.我有一个工作正常的饼图。 But the problem is when the slice of the pie is so small the numbers inside it is can't be seen just like this:但问题是当馅饼的切片太小时，里面的数字就不能像这样看到：

Instead of seening 3.21% on the green slice.而不是在绿色切片上看到 3.21%。 It only shows the 21 .它只显示21 。

How can I resolve this?我该如何解决这个问题？ I'm still really new to D3.js and I'm using d3 version 5.我对 D3.js 还是很陌生，我使用的是 d3 版本 5。

Here is my code fiddle:这是我的代码小提琴：

 <,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>

Answer 1

Easiest solution is to switch the order of the SVG paths drawn so that the smallest slice of the pie is drawn last and thus on top of the other elements.最简单的解决方案是切换绘制的 SVG 路径的顺序，以便最后绘制饼图的最小切片，从而在其他元素之上。

var data = [
{
    "columns_percent": "Up Time",
    "percentage_result": 96.79
},{
    "columns_percent": "Down Time",
    "percentage_result": 3.21
},
]

Sorting an array of objects by property values 按属性值对对象数组进行排序

如何修复d3.js中饼图的label

问题描述

1 个解决方案

解决方案1
2 已采纳 2020-05-23 23:49:44

如何修复d3.js中饼图的label

问题描述

1 个解决方案

解决方案1 2 已采纳 2020-05-23 23:49:44

解决方案1
2 已采纳 2020-05-23 23:49:44