【发布时间】：2019-09-04 20:57:08
【问题描述】：
对于 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文件夹的文件夹命名为“final project”
在检查器上，我收到了 d3.min.js 的以下错误：
d3.min.js:2 Uncaught (in promise) SyntaxError: Unexpected token / in JSON at position 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
}
]
没有错误，但图表未显示。谁能帮我解决这个问题？
【问题讨论】：
-
不确定这是否会有所帮助，但您应该在要绘制它的 div 之后在 html 文件中调用 main.js。 Main.js 试图用
id的#pie-chart-area在div中绘制图形。加载时，div 位于其下方且尚未加载，因此无法将图表放在任何地方。因此，将<script src="main.js"></script>放置在底部</body>结束标记之前，尤其是在要绘制图表的div 之后。检查是否有帮助。 -
另外，您使用的是什么版本的 d3.js？你能把console.logs注释掉试试吗？
-
@Coola 您好，我已根据您的建议编辑了帖子。在将 main.js 移动到底部并将 d3.mini.js 指向d3js.org/d3.v5.min.js 之后。我看到 svg 已经被绘制到画布上，但是页面仍然是空的。
-
您在控制台/页面检查中看到了什么？有什么错误吗？
-
@Coola 没有错误。
标签： javascript d3.js localhost