Question

我正在尝试一个简单的饼图，其中包含切片内的标签。我可以显示标签但不是全部。例如在示例代码中，我有Rick 5％，Paul 4％和Steve 3％因为切片的小尺寸而没有显示。我怎样才能克服这个问题？

<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

这段代码确定哪些切片会附加标签文字：

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

因此，将过滤掉总弧角小于0.2弧度的切片，并且不会添加标签文本。

您可以缩小过滤器值，在较薄的切片上显示标签（例如，将此示例中的.2更改为.05）以获得所需的效果：

Answer 2

您的非常小的数据未被显示，因为此代码正在过滤掉它。如果删除这段代码，那么这些小数据也会显示出来。

  params_template="""
   {
    "__EVENTTARGET": "AvailabilitySearchInputSearchView$LinkButtonSubmit",
    "availabilitySearch.SearchInfo.SalesCode": null,
    "availabilitySearch.SearchInfo.SearchStations[0].DepartureStationCode": FROM_CITY,
    "availabilitySearch.SearchInfo.SearchStations[0].ArrivalStationCode": TO_CITY,
    "availabilitySearch.SearchInfo.SearchStations[0].DepartureDate": "11/28/2015",
    "availabilitySearch.SearchInfo.SearchStations[1].DepartureStationCode": null,
    "availabilitySearch.SearchInfo.SearchStations[1].ArrivalStationCode": null,
    "availabilitySearch.SearchInfo.SearchStations[1].DepartureDate": null,
    "availabilitySearch.SearchInfo.Direction": "Oneway",
    "fromDate": "1448640000000",
    "returnDate": null,
    "fromDate_1": null,
    "fromDate_2": null,
    "availabilitySearch.SearchInfo.AdultCount": "1",
    "availabilitySearch.SearchInfo.ChildrenCount": "0",
    "availabilitySearch.SearchInfo.InfantCount": "0",
    "availabilitySearch.SearchInfo.PromoCode": null
  }
  """

  headers = {
      'Origin': 'http://www.flyscoot.com',
      'Accept-Encoding': 'gzip, deflate',
      'Accept-Language': 'en-US,en;q=0.8',
      'Upgrade-Insecure-Requests': '1',
      'User-Agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.80 Safari/537.36',
      'Content-Type': 'application/x-www-form-urlencoded',
      'Accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8',
      'Cache-Control': 'max-age=0',
      'Referer': 'http://www.flyscoot.com/index.php/en/',
      'Connection': 'keep-alive',
      'AlexaToolbar-ALX_NS_PH': 'AlexaToolbar/alxg-3.3',
  }

  ...

然而，标签不会在小数据中清晰显示。在饼图外显示标签会显示标签清晰。

d3饼图不显示所有标签

2 个答案: