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中位置0 在Re（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 个答案: