时间戳

首页 > 解决方案 > 饼图未使用 D3 v5 在仪表板区域中呈现

d3.js - 饼图未使用 D3 v5 在仪表板区域中呈现

问题描述

我一直在尝试使用右下角的 D3.JS v5 渲染一个简单的二值饼图，但无济于事。有人可以帮助我吗 - 代码可以在这里找到：

密码笔

  <body>
    <div id = "orgChart"></div>
    <div id = "mapChart"></div>
    <div id = "pieChart"></div>
 <script>

/******************************************************************************
           Pie Chart
******************************************************************************/

      function makePie() {
        var widthPie = (window.innerWidth * 0.3) ,
            heightPie = (window.innerHeight * 0.3);  

         var data = [ 
             {name: "Males", count: 43, percent: 61 }
           , {name: "Females", count: 27, percent: 39}
         ];

         var pie = d3.pie().value(d=>d.count).padAngle(0.025)(data);  

         var arcMkr = d3.arc().innerRadius(20).outerRadius(35)     
             .cornerRadius(4);

         var scC = d3.scaleOrdinal(d3.schemePastel1)                  
             .domain(pie.map(d=>d.index));                             

         var g = d3.select("#pieChart")                                    
             .append("g").attr("transform", "translate(widthPie/2, heightPie/2)");


         g.selectAll("path.x").data(pie).enter().append("path")     
             .attr("d", arcMkr)                                       
             .attr("fill", d=> scC(d.index)).attr("stroke", "grey");

         g.selectAll("text.x" ).data( pie ).enter().append( "text")    
             .text(d => d.data.name +": " + d.data.percent + "%")                                  
             .attr("x", d=>arcMkr.innerRadius(20).centroid(d)[0])     
             .attr("y", d=>arcMkr.innerRadius(20).centroid(d)[1])
             .attr("font-family", "sans-serif").attr( "font-size", 8)
             .attr("text-anchor", "middle")
         ;
     }    
     makePie();
</script>

标签： d3.js

解决方案

正如@Tom Shanley 在评论中指出的那样，您的饼图未按预期呈现的原因是因为您需要先创建一个 SVG。

请注意，我还更改了#pieChart 的一些 CSS 属性以提高片段的可见性，尽管这对于您的目的来说不是必需的。

<!DOCTYPE html>
<html lang = 'en'>
  <head>
    <meta charset = 'utf-8'>
    <meta name = 'viewport' content = 'width = device-width, initial-scale = 1.0'>
    <meta http-equiv = 'X-UA-Compatible' content = 'ie=edge'>
    <meta name = 'author' content = "Tom Bellmer">
    <meta name = 'date.created' content="03/05/2020">

    <!-- load the d3.js library -->	
    <script src="https://d3js.org/d3.v5.min.js"></script>

    <title>Org Chart</title>  
    <style>
      body{
         background-color: #faf2e4;
         font-family: sans-serif;
         font-size: 1.2em;
      }
      text{font-size: .6em}
      .node circle {
        fill: #fff;
        stroke: steelblue;
        stroke-width: 1px;
      }
      .node text {
        font: 9px sans-serif;
        font-weight: normal;
      }
      .link {
        fill: none;
        stroke: #ccc;
        stroke-width: 1px;  
      }
      #orgChart{
        position:absolute;
        top: 10px;
        left: 10px;
        width: 65%;
        height: 85%;
      
      }
      #mapChart{
        position:absolute;
        top: 10px;
        left: 66%;
        width: 34%;
        height: 50%; 
          
      }
      #pieChart{
        position:absolute;
        top: 51%;
        left: 66%;
        width: 34%;
        height: 55%;   
        background-color: crimson;     
      }   

  

      circle {
      /*    fill: #FF8533; */
         fill: steelblue;
         fill-opacity: .8;
         stroke: #fff;
      }

      circle:hover { fill: red;}

      div.tooltip { 
         position: absolute;     
         text-align: center;     
         width: 130px;          
         height: 14px;         
         padding: 2px;       
         font: 11px sans-serif;    
         background: dodgerblue; 
         color: white;
         border: 0px;        
         pointer-events: none;     
      }       

      svg g{
        fill: white;
        stroke: black;
      }   
      svg text{fill: black;} 
    </style>
  </head>
  <body>
    <div id = "orgChart"></div>
    <div id = "mapChart"></div>
    <div id = "pieChart"></div>
 <script>

/******************************************************************************
           Pie Chart
******************************************************************************/

      function makePie() {
        var widthPie = (window.innerWidth * 0.5) ,
            heightPie = (window.innerHeight * 0.5);  

         var data = [ 
             {name: "Males", count: 43, percent: 61 }, 
             {name: "Females", count: 27, percent: 39}
         ];
                  
         var pie = d3.pie().value(d=>d.count).padAngle(0.025)(data);
         
         var arcMkr = d3.arc().innerRadius(20).outerRadius(35)     
             .cornerRadius(4);
         
         var scC = d3.scaleOrdinal(d3.schemePastel1)                 
             .domain(pie.map(d=>d.index)); 
         
         // Modified ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
         var svg = d3.select("#pieChart")
            .append("svg")
            .attr("width", widthPie)
            .attr("height", heightPie);
         
         var g = svg.append("g").attr("transform", `translate(${widthPie/2}, ${heightPie/2})`);
         // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
     
         g.selectAll("path.x").data(pie).enter().append("path")     
             .attr("d", arcMkr)                                       
             .attr("fill", d=> scC(d.index)).attr("stroke", "grey");
     
         g.selectAll("text.x" ).data( pie ).enter().append( "text")    
             .text(d => d.data.name +": " + d.data.percent + "%")                                  
             .attr("x", d=>arcMkr.innerRadius(20).centroid(d)[0])     
             .attr("y", d=>arcMkr.innerRadius(20).centroid(d)[1])
             .attr("font-family", "sans-serif").attr( "font-size", 8)
             .attr("text-anchor", "middle");
     }    
     makePie();
</script>
</body>

推荐阅读