如何在d3.js中修复饼图标签

我有一个饼状图,工作正常。但是问题在于,当馅饼的切片是如此之小时,无法看到其中的数字:

enter image description here

Instead of seening 3.21% on the green slice. It only shows the 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>
评论
  • 飞雨
    飞雨 回复

    最简单的解决方案是切换绘制的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