d3 饼图未显示所有标签

Question

I am trying a simple pie chart with labels inside the slices.我正在尝试一个带有切片内标签的简单饼图。 I can display the labels but all not all.我可以显示标签，但不是全部。 eg in the sample code I have Rick 5%, Paul 4% and Steve 3% are not displayed because of the small size of the slices.例如，在示例代码中，由于切片尺寸较小，我没有显示 Rick 5%、Paul 4% 和 Steve 3%。 How can I overcome the problem?我怎样才能克服这个问题？

<html>
<head>    
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Testing Pie Chart</title>
    <!--<script type="text/javascript" src="d3/d3.v2.js"></script>-->
    <script src="../js/d3.min.js" type="text/javascript"></script>
    <style type="text/css">

        #pieChart {    
            position:absolute;
            top:10px;
            left:10px;
            width:400px;
            height: 400px; 
        }

        #lineChart {    
            position:absolute;
            top:10px;
            left:410px;
            height: 150px;
        }

        #barChart {
            position:absolute;
            top:160px;
            left:410px;
            height: 250px;
        }

        .slice {
            font-size: 8pt;
            font-family: Verdana;
            fill: white; //svg specific - instead of color
            font-weight: normal ;   
        } 

        /*for line chart*/
        .axis path, .axis line {
            fill: none;
            stroke: black;
            shape-rendering: crispEdges; //The shape-rendering property is an SVG attribute, used here to make sure our axis and its tick mark lines are pixel-perfect. 
        }

        .line {
            fill: none;
            /*stroke: steelblue;*/
            stroke-width: 3px;
        }

        .dot {
            /*fill: white;*/
            /*stroke: steelblue;*/
            stroke-width: 1.5px;
        }


        .axis text {
            font-family: Verdana;
            font-size: 11px;
        }

        .title {
            font-family: Verdana;
            font-size: 15px;    

        }

        .xAxis {
            font-family: verdana;
            font-size: 11px;
            fill: black;
        }  

        .yAxis {
            font-family: verdana;
            font-size: 11px;
            fill: white;
        }


        table {
            border-collapse:collapse;
            border: 0px;    
            font-family: Verdana;   
            color: #5C5558;
            font-size: 12px;
            text-align: right;          
        }

        td {
            padding-left: 10px;     
        }

        #lineChartTitle1 {
            font-family: Verdana;
            font-size  : 14px;
            fill       : lightgrey;
            font-weight: bold;
            text-anchor: middle;
        }

        #lineChartTitle2 {
            font-family: Verdana;
            font-size  : 72px;
            fill       : grey;
            text-anchor: middle;
            font-weight: bold;
            /*font-style: italic;*/
        }

    </style>

</head>
<body>

        var formatAsPercentage = d3.format("%"),
                formatAsPercentage1Dec = d3.format(".1%"),
                formatAsInteger = d3.format(","),
                fsec = d3.time.format("%S s"),
                fmin = d3.time.format("%M m"),
                fhou = d3.time.format("%H h"),
                fwee = d3.time.format("%a"),
                fdat = d3.time.format("%d d"),
                fmon = d3.time.format("%b")
                ;


        function dsPieChart() {

            var dataset = [
                {category: "Tom", measure: 0.30},
                {category: "John", measure: 0.30},
                {category: "Martin", measure: 0.30},
                {category: "Sam", measure: 0.30},
                {category: "Peter", measure: 0.25},
                {category: "Johannes", measure: 0.15},
                {category: "Rick", measure: 0.05},
                {category: "Lenny", measure: 0.18},
                {category: "Paul", measure: 0.04},
                {category: "Steve", measure: 0.03}
            ]
                    ;

            var width = 400,
                    height = 400,
                    outerRadius = Math.min(width, height) / 2,
                    innerRadius = outerRadius * .999,
                    // for animation
                    innerRadiusFinal = outerRadius * .5,
                    innerRadiusFinal3 = outerRadius * .45,
                    color = d3.scale.category20()    //builtin range of colors
                    ;

            var vis = d3.select("#pieChart")
                    .append("svg:svg")              
                    .data([dataset])                  
                    .attr("width", width)          
                    .attr("height", height)
                    .append("svg:g")                
                    .attr("transform", "translate(" + outerRadius + "," + outerRadius + ")")   
                    ;

            var arc = d3.svg.arc()             
                    .outerRadius(outerRadius).innerRadius(innerRadius);

            // for animation
            var arcFinal = d3.svg.arc().innerRadius(innerRadiusFinal).outerRadius(outerRadius);
            var arcFinal3 = d3.svg.arc().innerRadius(innerRadiusFinal3).outerRadius(outerRadius);

            var pie = d3.layout.pie()           
                    .value(function (d) {
                        return d.measure;
                    });   

            var arcs = vis.selectAll("g.slice")     
                    .data(pie)                          
                    .enter()                            
                    .append("svg:g")                
                    .attr("class", "slice")    
                    .on("mouseover", mouseover)
                    .on("mouseout", mouseout)
                    .on("click", up)
                    ;

            arcs.append("svg:path")
                    .attr("fill", function (d, i) {
                        return color(i);
                    }) 
                    .attr("d", arc)     
                    .append("svg:title") 
                    .text(function (d) {
                        return d.data.category + ": " + formatAsPercentage(d.data.measure);
                    });

            d3.selectAll("g.slice").selectAll("path").transition()
                    .duration(750)
                    .delay(10)
                    .attr("d", arcFinal)
                    ;

            arcs.filter(function (d) {
                return d.endAngle - d.startAngle > .2;
            })
                    .append("svg:text")
                    .attr("dy", ".35em")
                    .attr("text-anchor", "middle")
                    .attr("transform", function (d) {
                        return "translate(" + arcFinal.centroid(d) + ")rotate(" + angle(d) + ")";
                    })

                    .text(function (d) {
                        return d.data.category;
                    })
                    ;

            function angle(d) {
                var a = (d.startAngle + d.endAngle) * 90 / Math.PI - 90;
                return a > 90 ? a - 180 : a;
            }


            // Pie chart title          
            vis.append("svg:text")
                    .attr("dy", ".35em")
                    .attr("text-anchor", "middle")
                    .text("Revenue Share 2012")
                    .attr("class", "title")
                    ;


            function mouseover() {
                d3.select(this).select("path").transition()
                        .duration(750)
                        //.attr("stroke","red")
                        //.attr("stroke-width", 1.5)
                        .attr("d", arcFinal3)
                        ;
            }

            function mouseout() {
                d3.select(this).select("path").transition()
                        .duration(750)
                        //.attr("stroke","blue")
                        //.attr("stroke-width", 1.5)
                        .attr("d", arcFinal)
                        ;
            }

            function up(d, i) {

                updateBarChart(d.data.category, color(i));
                updateLineChart(d.data.category, color(i));

            }
        }

        dsPieChart();


    </script>
</body>

Answer 1

This line of your code determines which slices get label text appended to them:这行代码决定了哪些切片会附加标签文本：

arcs.filter(function (d) {
    return d.endAngle - d.startAngle > .2;
})
.append("svg:text")...

So slices where the total arc angle is less than 0.2 radians will be filtered out, and label text will not be added.所以总弧角小于0.2弧度的切片会被过滤掉，并且不会添加标签文本。

You could just reduce the filter value, to display the labels on thinner slices (eg change .2 in this example to .05 ) to get the effect you want:您可以减少过滤器值，以在更薄的切片上显示标签（例如，将本例中的.2更改为.05 ）以获得您想要的效果：

Answer 2

your very small data is not being displayed because it is being filtered out by this code.您的非常小的数据没有被显示，因为它被这段代码过滤掉了。 if you remove this piece of code, then those small data will also be displayed.如果你去掉这段代码，那么那些小数据也会显示出来。

    arcs.filter(function (d) {
        return d.endAngle - d.startAngle > .2;
    })

However label will not be displayed clearly in small data.但是标签不会在小数据中清晰显示。 Displaying labels outside pie chart will display labels a bit clear.在饼图外显示标签会使标签显示得更清晰一些。

d3 饼图未显示所有标签

问题描述

2 个解决方案

解决方案1
1 已采纳 2015-11-01 14:00:01

解决方案2
0 2015-11-01 14:02:22

d3 饼图未显示所有标签

问题描述

2 个解决方案

解决方案1 1 已采纳 2015-11-01 14:00:01

解决方案2 0 2015-11-01 14:02:22

解决方案1
1 已采纳 2015-11-01 14:00:01

解决方案2
0 2015-11-01 14:02:22