饼图错误d3.js中的变量名称

Question

            var margin = {top: 200, right: 20, bottom: 20, left: 700},
                width = 2000 - margin.right - margin.left,
                height = 600 - margin.top - margin.bottom,
                radius = width/8;

                var color = d3.scaleOrdinal()
                    .range(["#BBDEFB", "#90CAF9", "#64B5F6", "#42A5F5", "#2196F3", "#1E88E5", "#1976D2"]);

            //svg
            var svg = d3.select("body").append("svg")
                    .attr("width", width) //+ margin.left + margin.right)
                    .attr("height", height) //+ margin.top + margin.bottom)
                .append("g")
                    .attr("transform",
                        "translate(" + margin.left + "," + margin.top + ")");
            //arcos
            var arc = d3.arc()
                .outerRadius(radius - 10)
                .innerRadius(0);
            
            //console.log(arc);
            
            //posiçaão do centroide para o texto
            var labelArc = d3.arc()
                .outerRadius(radius - 40)
                .innerRadius(radius - 40);

            //console.log(labelArc);
            
            //pie
            var pie = d3.pie()
                .sort(null)
                .value(function(leaves) { return leaves.value; });
            
            //console.log(pie);
            
            d3.csv("master.csv", function(error, data) {
                if (error) throw error;
                            
                data.forEach(function(d){
                    d.sex = d.sex;
                    d.suicides_no = +d.suicides_no;
                });
                
                //console.log(data[0]);

                var dataSuicides = d3.nest()
                    .key(function(d){return d.sex; })
                    .rollup(function(leaves){
                        var sum = 0;
                        leaves.forEach(function(d){
                            sum += d.suicides_no;
                        })
                        return sum
                        ;})
                    .entries(data);
                
                console.log(dataSuicides);

                var g = svg.selectAll(".arc")
                        .data(pie(dataSuicides))
                    .enter().append("g")
                        .attr("class", "arc");
                
                console.log(g);

                g.append("path")
                    .attr("d", arc)
                    .style("fill", function(leaves) { return color(leaves.key); })
                    // transition 
                    .transition()
                    .ease(d3.easeLinear)
                    .duration(2000)
                    .attrTween("d", tweenPie);

                g.append("text")
                    .transition()
                    .ease(d3.easeLinear)
                    .duration(2000)
                    .attr("transform", function(leaves) { return "translate(" + labelArc.centroid(leaves) + ")"; })
                    .attr("dy", ".35em")
                    .text(function(leaves) { return leaves.key; });
            }); 

        function tweenPie(b) {
            b.innerRadius = 0;
            var i = d3.interpolate({startAngle: 0, endAngle: 0}, b);
            return function(t) { return arc(i(t)); };
        }     

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
  }
  
  .topnav {
    overflow: hidden;
    background-color: #333;
  }
  
  .topnav a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
  }
  
  .topnav a:hover {
    background-color: #ddd;
    color: black;
  }
  
  .topnav a.active {
    background-color: rgb(134, 44, 59);
    color: white;
  }
  
  IMG.displayed {
              display: block;
              margin-left: auto;
              margin-right: auto 
  }
  
  h1 {
      font-family: serif;
      font-variant: small-caps;
      font-weight: bold;
      font-size: 52px;
      color: rgb(37, 5, 15);      
      }

      h1{
        color: rgb(115, 115, 115);
        font-size: 30px;
        font-family: sans-serif;
        font-weight: bold;
        margin: 0;
        padding-bottom: 10px;}
     /* p{
        color: rgb(10, 0, 0);
        font-size: 15px;
        font-family: sans-serif;
        font-weight: bold;
        margin: 0;
        padding-bottom: 10px;} */
     path:hover{
        stroke: rgb(255, 255, 255);
        stroke-width: 0.30px;
        fill: rgb(8, 82, 156,0.6); 
        cursor:pointer;
     }
     .labels{
        font-family: sans-serif;
        font-size: 12px;
        fill:  rgb(21, 33, 36);
        cursor:pointer;
     }
      


  

<!DOCTYPE html>
<html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <div class="topnav">
            <a class="active" href="index.html">Home</a>
            <a href="mapa.html">Mapa mundo</a>
            <a href="evolucaoAno.html">Evolucao por ano</a>
            <a href="pieChart.html">Genero</a>
            <a href="barchart.html">FaixaEtaria</a>
        </div>

    <h1 style="text-align: center">Genero e numero de suicidios</h1>
    <script src="//d3js.org/d3.v4.min.js" charset="utf-8"></script>

        <script>

        </script>

    </body>
</html>

我打算提供一个饼图，其中包含sex及其自杀人数。为此，我转到master文件以获取所需的变量。

使用此代码，我可以在浏览器中绘制一个饼图，其中包含从master文件中操作的数据。但是文字和颜色并没有如愿以偿。我希望“性别and总和出现在摘要中，但我不能。

数据处理正确，我已经检查了控制台