D3js餅圖未顯示在本地主機上

Question

仍然是D3.js的全新內容。 我正在嘗試使用Mac在我的本地服務器上測試一個非常簡單的D3.js甜甜圈圖。 我通過使用localhost打開

       python -m http.server

然后出現一條消息：

       Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...

然后，我通過指向http：// localhost：8000 / final％20project /打開chrome上的頁面

注意：包含index.html以及data，js和css文件夾的文件夾被命名為“最終項目”

在檢查器上，我收到d3.min.js的以下錯誤：

d3.min.js：2未捕獲（承諾）SyntaxError：意外的令牌/ JSON在Re的位置0（d3.min.js：2）

我的index.html代碼：

<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
    <!-- Bootstrap -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="shortcut icon" href="icons8-bookmark-40.png">    

</head>

<body>
     <div class="col-md-9" id="pie-chart-area"></div>  

    <!-- JS libraries -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="js/d3-tip.js"></script>

<!-- Custom JS -->
<script src="main.js"></script>
</body>
</html>

Main.js：

function getGenderColor(genderColor) {
    var fill;
    switch(genderColor) {
      case "Teen Boys":
         fill = "#0079BB";
         break;
      case "Teen Girls":
         fill = "#9E519F";
         break;
      default:
         fill = "blue";
    }
    return fill;
}


function pieChart(chartArea) {
     var margin = {left:40, right:40, top:40, bottom:40};
     var width = 500 - margin.top - margin.bottom,
         height = 800 - margin.left - margin.right;
     var radius = Math.min(width, height) / 2;
     var donutWidth = 75;


     // color range
    var color = d3.scaleOrdinal()
        .range(["#0079BB", "#9E519F"]);

    // entire canvas
    var canvas = d3.select(chartArea)
                 .append("svg")
                 .attr("width", width + margin.left + margin.right)
                 .attr("height", height + margin.top + margin.bottom)
                 .append("g")
                 .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

    //define arc
    var arc = d3.arc()
         .innerRadius(radius - donutWidth)
         .outerRadius(radius);

    // import pie chart and data
     var pie = d3.pie()
    .value(function(d) { return d.count; })
    .sort(null);


    d3.json("data/s_gender.json", function(error,data) {
        /*if (error) return console.error(error);
          console.log('mockdata',data);*/

          data.forEach(function(d) {
            d.count = +d.count; 
    });

     var path = svg.selectAll('path')
            .data(pie(data))
            .enter()
            .append('path')
            .attr('d', arc)
            .attr('fill', function(d, i) {
              return color(d.data.gender);
     });

     }); //d3.json

}

pieChart("#pie-chart-area");

Json文件（s_gender.json）：

[
{
 "gender":"F",
 "count":533
},
{
  "gender":"M",
  "count":260
}
]

沒有錯誤，但圖表未顯示。 有人可以幫我解決問題嗎？

Answer 1

您的代碼存在的問題主要是：

該代碼是使用D3.js v4構建的。 如果使用D3.js v5，則必須使用Promise方法來解析文件。 否則，您可以簡單地src D3.js v4庫。
其中還有一些其他錯誤，例如代碼放置與腳本源。 庫最好裝入標頭中，而操縱DOM的Javascript應放置在要附加到的div之后。
您的getGenderColor函數未在代碼中正確調用以執行填充。

這是顯示餅圖的工作塊。 https://bl.ocks.org/akulmehta/183847663739b944038ad973e0b7d5b4/

請隨時在下面的評論中要求任何澄清。

D3js餅圖未顯示在本地主機上

問題描述

1 個解決方案

解決方案1
1 已采納 2019-04-15 03:05:11

D3js餅圖未顯示在本地主機上

問題描述

1 個解決方案

解決方案1 1 已采納 2019-04-15 03:05:11

解決方案1
1 已采納 2019-04-15 03:05:11